input文本框获取焦点和失去焦点判断

来源：互联网发布：听新闻学英语软件编辑：程序博客网时间：2024/05/18 18:44

onBlur:当输入框失去焦点后
onFocus:当输入框获得焦点后

这两个JavaScript事件是写在html标签中的例如：

<input  type="text"    onBlur=" " onFocus=" " />

使用jQuery的实现方法为：

　　　　对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。

focus()：得到焦点时使用，blur()：失去焦点时使用。

代码如下:

$("input").focus(); 或$("input").focus(function(){这里是获取焦点时的事件}) $("input").blur(); 或$("input").blur(function(){这里是失去焦点时的事件})

同样可以使用jQuery中提供的:focus伪类来判定元素是否获取焦点；

// Get the focused element:var $focused = $(':focus');// No jQuery:var focused = document.activeElement;// Does the element have focus:var hasFocus = $('input').is(':focus');// No jQuery:elem === elem.ownerDocument.activeElement;

下面写一个实例：

<!DOCTYPE HTML><HTML> <HEAD>  <TITLE> New Document </TITLE> </HEAD> <style>    .bor{        border:3px solid red;    } </style><BODY>    <input type="text"/><script type="text/javascript" src="jquery-1.11.3.js"></script><script type="text/javascript">    $(document).ready(function(){        $("input").focus(function(){            $(this).addClass("bor");        });        $("input").blur(function(){            $(this).removeClass("bor");        });    });</script></BODY></HTML>

阅读全文

0 0