js与jquery文本框获得失去焦点实例解析

发布时间:2020-10-17编辑:脚本学堂
分享二个文本框焦点获得与失去的例子,分别用js与jquery检测文本框焦点,看看有什么区别,需要的朋友参考下。

例1,Js方法检测文本框焦点。
 

复制代码 代码示例:
<head>
<script type="text/javascript">
function Doit() {
// 获得一个input的数组,需要遍历
var inputs = document.getElementsByTagName_r("input");
for (var i = 0; i < inputs.length; i++) {
 
// 如果是文本控件
if (inputs[i].type == "text") {
// 前面有on——
inputs[i].onfocus = function () {
// 通过this直接获取触发的元素
this.style.backgroundColor = "yellow";
}; // www.jb200.com
inputs[i].onblur = function () {
this.style.backgroundColor = "white";
};
}
}
}
</script>
</head>
<body onload="Doit()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Button1" type="button" value="button" />
</body>
</html>
 

例2,jquery方法检测文本框焦点。
 

复制代码 代码示例:
<head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 不需要遍历
$('input[type=text]').click(function () {
// this前面要加dollar符
$(this).css("backgroundColor","yellow");
}).blur(function () { $(this).css("backgroundColor","white");});
// blur前面没有on
});
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Button1" type="button" value="button" />
</body>
</html>