判断文本框是否已经获取焦点和判断复选框是否选定

最新推荐文章于 2023-12-18 12:11:07 发布

ios0213

最新推荐文章于 2023-12-18 12:11:07 发布

阅读量6.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/ios0213/article/details/51773980

版权

JavaScript 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
div {
	margin-top: 80px;
	margin-left: 100px;
	position: relative;
}
textarea {
	outline: none;
	margin: 0;
}
p {
	margin: 0;
	padding: 0;
	display: inline-block;
	border: 1px solid #FFF;
}
#button {
	background-color: #033;
	border: 1px solid #033;
	width: 100px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	top: 180px;
	left:340px;
}
#demo {
	position:absolute;
	left:0;
	top:180px;
}
span{
	position:absolute;
	top:180px;
	left:20px;
}
</style>
<script>
function Mover()
{
	var textarea=document.getElementById("test");
	if(document.activeElement.id=="test")
	{
		textarea.style.borderColor="#0077FF";
		return;
	}
	textarea.style.borderColor="#f00";
}
function Mout()
{
	var textarea=document.getElementById("test");
	if(document.activeElement.id=="test")
	{
		textarea.style.borderColor="#0077FF";
		return;
	}
	textarea.style.borderColor="";
}
function d1()
{
	var textarea=document.getElementById("test");
	textarea.style.borderColor="#0077FF";
}
function d2()
{
	var textarea=document.getElementById("test");
	textarea.style.borderColor="";
}
function check()
{
	if(document.getElementById("demo").checked){
		document.getElementById("button").style.display="block";
	}
	else
	{
		document.getElementById("button").style.display="none";
	}
}
</script>
</head>

<body>
<div>
  <textarea rows="10" cols="60" id="test" onMouseOver="Mover()" onMouseOut="Mout()" onFocus="d1()" onBlur="d2()" >小学二年级的孩子好像很喜欢邻座那个长头发的女孩，常常提起她。每次一讲到她的种种琐事时，你都可以看到他眼睛发亮，开心到藏不住笑容的样子。
他的爸妈都不忍心说破，因为他们知道不经意的玩笑都可能给这年纪的孩子带来巨大的羞怒，甚至因此而阻断了他人生中第一次对异性那么单纯而洁净的思慕。
双方家长在校庆时孩子们的表演场合里见了面；女孩的妈妈说女儿也常常提起男孩的名字，而他们也有一样的默契，从不说破。
女孩气管不好，常感冒咳嗽，老师有一天在联络簿上写说：邻座的女生感冒了，只要她一咳嗽，孩子就皱着眉头盯着她看，问他说是不是咳嗽的声音让你觉得烦？没想到孩子却说：不是，她咳得好辛苦哦，我好想替她咳！
老师最后写道：我觉得好丢脸，竟然用大人那么自私的想法去污蔑一个孩子那么善良的心意。
爸妈喜欢听他讲那女孩子点点滴滴，因为从他的描述里仿佛也看到了孩子们那么自在、无邪的互动。
“我知道为什么她写的字那么小，我写的这么大，因为她的手好小，小到我可以把它整个包——起来哦！”
爸妈于是想着孩子们细嫩的双手紧紧握在一起的样子，以及他们当时的笑容。
“她耳朵有长毛耶，亮晶晶的，好好玩！”
爸妈知道，那是下午的阳光照进教室，照在女孩的身上，女孩耳轮上的汗毛逆着光线于是清晰可见；孩子简单的描述中，其实有无比深情的凝视。
三年级上学期的某一天，女孩的妈妈打电话来，说他们要移民去加拿大。
“我不知道孩子们会不会遗憾……”女孩的妈妈说，“如果有，我会觉得好罪过……”

</textarea>
  <br />
  <input type="checkbox" name="ckbox" id="demo" onClick="check()" /><span>同意以上该条款</span>
  <input type="button" id="button" value="下一步" style="display:none;"/>
</div>
</body>
</html>

上面是做的一个模仿注册页面的效果，当鼠标移动到文本框的时候，文本框边框改变颜色，文本框获取焦点的时候，边框改变为另外一种颜色等，具体效果可以在网页中测试。

1.在网页编程中，如果让元素自动获取焦点，我们可以用focus()函数，

如:

<input type="text" id="demo" />

自动获取焦点：

document.getElementById("demo").focus();

在使用的过程中我们还要注意当无法获取焦点的时候出现的异常。

try{
var dd=documentById("demo");
dd.focus();
dd.select();
}
catch(e){}

2.那么判断input元素是否获取了焦点怎样做呢？

用activeElement来判断是否获取了焦点。
如：

<input id="demo" type="text" />

if(document.getElementById.activeElement.id=="test")

则可以判断该文本框获取了焦点。

3.怎样判断复选框是否选定。

用checked来判断，如：

<input type="checkbox" name="ckbox" id="demo" onClick="check()" />

if(document.getElementById("demo").checked)

如果返回值为真，则复选框一定被选定。

function check()
{
	if(document.getElementById("demo").checked){
		document.getElementById("button").style.display="block";
	}
	else
	{
		document.getElementById("button").style.display="none";
	}
}

上面这一段代码，可以仔细看一下，实现的功能是：

input元素绑定onClick事件，当onClick事件被触发的时候，先判断该复选框是否被选定，如果选定，则继续执行下一步，如果没有，则执行另外结果。