input⽂本框获取焦点和失去焦点判断onBlur:当输⼊框失去焦点后
onFocus:当输⼊框获得焦点后
html内容文本框
这两个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>
当然还可以根据获取元素的状态修改其他元素的各项属性,或者是需要发⽣的事件

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。