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

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input文本框获取焦点和失去焦点事件判断相关的知识，希望对你有一定的参考价值。

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>

当然还可以根据获取元素的状态修改其他元素的各项属性，或者是需要发生的事件

 

 

以上是关于input文本框获取焦点和失去焦点事件判断的主要内容，如果未能解决你的问题，请参考以下文章

jquery获取焦点和失去焦点事件代码

失去焦点事件啥意思

文本框 失去焦点 是啥意思？

关于js中事件监听的问题（文本框 回车键 失去焦点）

js 怎样判断ipunt失去焦点

js 无法获得焦点怎么回事？