您的位置：首页 > 其它

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

2016-06-28 11:01 232 查看 
<!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事件被触发的时候，先判断该复选框是否被选定，如果选定，则继续执行下一步，如果没有，则执行另外结果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航