input文本框獲取焦點和失去焦點判斷

本文轉載自查看原文 2016-02-01 13:55 145623 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;

下面寫一個實例：

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

當然還可以根據獲取元素的狀態修改其他元素的各項屬性，或者是需要發生的事件

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 文本框獲取焦點失去焦點實時監聽 input，文本框獲取焦點時邊框樣式 input框獲取焦點和失去焦點，select框change事件 input標簽獲取焦點時文本框內提示信息清空（並且變換文本框背景顏色獲取焦點失去焦點更改input輸入框樣式 JS之文本框獲得焦點和失去焦點 easyUI文本框獲得焦點，失去焦點 JavaScript 獲取焦點和失去焦點 javascript 獲取焦點和失去焦點事件文本框獲取焦點時，光標出現在文本末尾