Determine which form input is focused using JavaScript or jQuery

Question

How do you determine which form input is focused using JavaScript or jQuery?

Inside the function, I want to be able to determine what input focus the focus has. I would like to be able to do this in direct JavaScript and / or jQuery.

Answer 1

I'm not sure if this is the most efficient way, but you can try:

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

Answer 2

document.activeElement , it has been supported in IE for a long time, and the latest versions of FF and chrome are also supported. If nothing has focus, it returns a document.body object.

Answer 3

If all you want to do is change the CSS for a specific form field when it becomes focus, you can use the CSS: "focus" selector. For compatibility with IE6, which does not support this, you can use the IE7 library.

Answer 4

Otherwise, you can use the onfocus and onblur events.

something like:

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

and then something like this in your javascript

 if (txtfocus==1) { //Whatever code you want to run } if (txtfocus==0) { //Something else here } 

But that would be my way of doing this, and it might not be very practical if you have, say, 10 inputs :)

Answer 5

I would do it this way: I would use a function that would return 1 if the identifier of the sent item was the one that would trigger my event, and everyone else would return 0, and the if statement would then simply fail and do nothing:

 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 markup:

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

The first two will do the event in doSomething, the last will not (or will do the else clause if it is not executed).

-Tom

Answer 6

Here is a solution for text / password / textarea (I'm not sure that I forgot others that can get focus, but they could be easily added by changing the if clauses ... in the design it could be improved by putting the if body in its own function, to identify suitable inputs that can get focus).

Assuming you can rely on a user playing in a browser that is not prehistoric (http://www.caniuse.com/#feat=dataset):

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

For prehistoric browsers you can use the uglier one:

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

Try

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

Answer 8

You only need one listener if you use the bubbling event (and attach it to the document); one per form is reasonable though:

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

(Maybe you should move the selectedInput variable to the form.)

Answer 9

You can use this

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

It starts the function when focusing the input.