JQuery Dynamically focus on first INPUT or Textarea

Question

It's hard to start the morning.

I have a series of badges. When you click the icon, it loads the form. Some of the forms have an input [text], others have text fields.

What I'm trying to come up with is jQuery, that as soon as I load a form that I can run, it will ... Focus on the first input or text field, whatever it is, dynamically, so I don't need if blocks.

Ideas?

Answer 1

That should do it, I think.

$("#formId input:text, #formId textarea").first().focus(); 

Answer 2

There he is:

 $('#form-id :input:enabled:visible:first').focus(); 

# form-id - form identifier; : input selects any input element and textarea; : enabled provides editing input; : viisble provides element visibility; : obvious at first

Answer 3

 $(":input:first").focus(); 

The :input selector captures all input elements, textarea, select, and button.

Answer 4

some of your codes would be nice .. but that should be easy.

assuming you upload your file in a div that you know id ....

all you have to do is something like

 $('#TheIdOfYourFormDiv').find('input, textarea').first().focus() 

after loading the form

Answer 5

EDIT

Actually it is not so many decisions. The solutions below Patricia and Onkelborg are much more elegant.

 var $firstInput = jQuery("input:first"); var $firstTextArea = jQuery("textarea:first"); if(firstInput.length == 0) { $firstTextArea.focus(); } else { $firstInput.focus(); } 

Answer 6

It works for me in the download event.

 $('#Div').find('input:first').focus(); 

Answer 7

Here is my solution. The code should be simple enough to follow, but here is the idea:

• get all inputs, select and text fields
• filter all buttons and hidden fields
• filter for allowed, visible fields only
• select first
• focus selected field

The code:

 function focusFirst(parent) { $(parent).find('input, textarea, select') .not('input[type=hidden],input[type=button],input[type=submit],input[type=reset],input[type=image],button') .filter(':enabled:visible:first') .focus(); } 

Then just call focusFirst with the parent or selector.

Selection:

 focusFirst('#parentId'); 

Element

 var el = $('#parentId'); focusFirst(el); 

Answer 8

Here's a solution for bootstrap modals developed on top of this by @craztmatt and others. I expanded so that the selection of the target element begins with the modality that triggered the event. This element catches input, textarea and select elements.

 // do this to make bootstrap modals auto-focus. // delegate to body so that we only have to set it up once. $('body').on('shown.bs.modal', function (e) { var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal if (ele) {ele.focus();} // if we found one then set focus. }) 

Not exactly an OP question, but should be adapted to the case with pure jquery.

Answer 9

Because: visible is a jQuery extension, and not part of the CSS specification, queries using: visible cannot take advantage of the performance enhancement provided by the built-in DOM request of the SelectorAll () method. For best performance when using: elements visible for selection, first select the elements using a clean CSS selector, then use .filter (": visible").

Use instead:

 $('form').filter(':input:first').focus(); 

or

 $('input').first().focus(); //as shown in the "correct" answer. 

Also remember when using .focus()

Attempting to set focus to a hidden element causes an error in Internet Explorer. Try to use .focus () for elements that are visible. To fire focus events for an element without setting the focus on the element, use .triggerHandler ("focus") instead of .focus ().