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

来源：互联网发布：淘宝无线连接转化编辑：程序博客网时间：2024/06/15 21:34

<textarea cols="50" rows="15" name="code" class="javascript"> //第一种方法所有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; } } }</textarea>

网页内容：