input输入框获得、失去焦点添加事件

最新推荐文章于 2025-03-15 09:59:07 发布

weixin_30379531

最新推荐文章于 2025-03-15 09:59:07 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yegeng/p/10179382.html

本文详细介绍了HTML中输入框的onBlur和onFocus事件，以及如何使用jQuery进行处理。通过实例展示了如何在获取和失去焦点时修改输入框的样式。

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;

下面写一个实例：

按 Ctrl+C 复制代码

<!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>