您的位置：首页 > 其它

获得焦点的input背景变黄色的四种方法

2011-02-05 21:23 357 查看 
//第一种方法所有input通吃性
function inevent() {
var container = document.getElementById("container");
var inputs = container.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onfocus = textfocus;
}
}

function textfocus() {
var container = document.getElementById("container");
var inputs = container.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input == this) {//所有input通吃性，无论文本框还是按钮
this.style.background = "yellow";
}
else {
input.style.background = "white";
}
}
}
//第一种方法结束
//第二种方法开始所有input通吃性
function inevent1() {
var container = document.getElementById("container");
var inputs = container.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onfocus = inputfocus;
input.onblur = inputblur;
}
}

function inputfocus() {
this.style.background = "yellow";
}

function inputblur() {
this.style.background = "white";
}
//第二种方法结束
//第三种方法开始所有input通吃性
function inevent2() {
var container = document.getElementById("container");
var inputs = container.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onfocus = function () { this.style.background = "yellow"; }//匿名函数响应事件
input.onblur = function () { this.style.background = "white"; }
}
}
//第三种方法结束
//第四种方法仅对type="text"的input执行变化
function inevent3() {
var container = document.getElementById("container");
var inputs = container.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type == "text") {//当input的type为Text里才响应两个事件，其它的不响应
input.onfocus = inputfocus;//应用第二种方法的两个事件
input.onblur = inputblur;
}
}
}


网页内容：

<body onload="inevent3()">
<div id="container">
<input type="text" /><input type="text" /><input type="text" /><input type="text" /><input type="button" value="点击" />
</div>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航