使用JavaScript或jQuery檢測哪些表單輸入具有焦點

Question

如何使用JavaScript或jQuery檢測哪些表單輸入具有焦點？

從函數內部我想能夠確定哪個表單輸入有焦點。我希望能夠在直接的JavaScript和/或jQuery中做到這一點。

Answer 1

我不知道這是否是最有效的方式，但你可以嘗試：

var selectedInput = null; 
$(function() { 
    $('input, textarea, select').focus(function() { 
     selectedInput = this; 
    }).blur(function(){ 
     selectedInput = null; 
    }); 
}); 

Answer 2

如果您只想在獲取焦點時更改特定表單字段的CSS，則可以使用CSS「：focus」選擇器。爲了與不支持此功能的IE6兼容，您可以使用IE7庫。

Answer 3

document.activeElement，它已經在IE支持的很長一段時間和FF的最新版本和Chrome支持還。如果沒有焦點，則返回document.body對象。

Answer 4

嘗試

window.getSelection().getRangeAt(0).startContainer 

Answer 5

否則，你可以使用onfocus和的onblur事件。

類似：

<input type="text" onfocus="txtfocus=1" onblur="txtfocus=0" /> 

再有這樣的事情在你的JavaScript

if (txtfocus==1) 
{ 
//Whatever code you want to run 
} 

if (txtfocus==0) 
{ 
//Something else here 
} 

但是，這也只是我做的方式，它可能不是，如果你非常實用有，說10輸入:)

Answer 6

我會這樣做：我用了一個函數，如果它發送的元素的ID是一個會觸發我的事件，並且所有其他s就返回一個0，和「if」語句會然後就落空，而不是做任何事情：

function getSender(field) { 
    switch (field.id) { 
     case "someID": 
     case "someOtherID": 
      return 1; 
     break; 
     default: 
      return 0; 
    } 
} 

function doSomething(elem) { 
    if (getSender(elem) == 1) { 
     // do your stuff 
    } 
    /* else { 
     // do something else 
    } */ 
} 

HTML標記：

<input id="someID" onfocus="doSomething(this)" /> 
<input id="someOtherID" onfocus="doSomething(this)" /> 
<input id="someOtherGodForsakenID" onfocus="doSomething(this)" /> 

前兩個將在DoSomething的做的情況下，最後一個不會（或者如果未註釋，將會執行else子句）。

-Tom

Answer 7

下面是文字/密碼/ textarea的解決方案（不知道如果我忘了別人，可以讓焦點，但他們可以通過修改if引導的從句...的改善可以作出很容易地添加通過將if的主體放在它自己的函數中來確定可以獲得焦點的合適輸入）。

假設您可以依靠用戶使用非歷史性瀏覽器（http：//www.caniuse。COM /＃壯舉=數據集）：

 <script> 
     //The selector to get the text/password/textarea input that has focus is: jQuery('[data-selected=true]') 
     jQuery(document).ready(function() { 
      jQuery('body').bind({'focusin': function(Event){ 
       var Target = jQuery(Event.target); 
       if(Target.is(':text')||Target.is(':password')||Target.is('textarea')) 
       { 
        Target.attr('data-selected', 'true'); 
       } 
      }, 'focusout': function(Event){ 
       var Target = jQuery(Event.target); 
       if(Target.is(':text')||Target.is(':password')||Target.is('textarea')) 
       { 
        Target.attr('data-selected', 'false'); 
       } 
      }}); 
     }); 
    </script> 

對於史前的瀏覽器，你可以用醜陋：

 <script> 
     //The selector to get the text/password/textarea input that has focus is: jQuery('[name='+jQuery('body').data('Selected_input')+']') 
     jQuery(document).ready(function() { 
      jQuery('body').bind({'focusin': function(Event){ 
       var Target = jQuery(Event.target); 
       if(Target.is(':text')||Target.is(':password')||target.is('textarea')) 
       { 
        jQuery('body').data('Selected_input', Target.attr('name')); 
       } 
      }, 'focusout': function(Event){ 
       var Target = jQuery(Event.target); 
       if(Target.is(':text')||Target.is(':password')||target.is('textarea')) 
       { 
        jQuery('body').data('Selected_input', null); 
       } 
      }}); 
     }); 
    </script> 

Answer 8

如果你使用事件冒泡（並將其綁定到你只需要一個監聽器文件）;每形成一個合理，但：

var selectedInput = null; 
$(function() { 
    $('form').on('focus', 'input, textarea, select', function() { 
     selectedInput = this; 
    }).on('blur', 'input, textarea, select', function() { 
     selectedInput = null; 
    }); 
}); 

（也許你應該對selectedInput變量移動到表格）

Answer 9

您可以使用此

<input type="text" onfocus="myFunction()"> 

它觸發功能，當輸入專注。