jQuery Dynamically focus on the first INPUT or Textarea

Here's a tricky one to start the morning.

I have a series of icons.开发者_开发技巧 When you click an icon it loads a form. Some of the forms have input[text] others have textareas.

What I'm trying to come up with is jQuery that once I load the form I can run that will... Focus in on the first input or textarea whatever it may be, dynamically so I don't need if blocks.

Ideas?

This should do it I think

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

Here it is:

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

#form-id is ID of the form; :input selects any input and textarea element; :enabled ensures the input is editable; :viisble ensures that the element is visible; :first is obvious

some of your code would be nice.. but this should be easy.

assuming your loading your for into a div that you know the id of....

all you have to do is something like

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

after you've loaded your form

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

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

EDIT

This is actually not that great of a solution. Patricia's and Onkelborg's solutions below are much more elegant.

var $firstInput = jQuery("input:first");
var $firstTextArea = jQuery("textarea:first");

if(firstInput.length == 0) {
  $firstTextArea.focus();
}

else {
  $firstInput.focus();
}

It's working for me in the load event.

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

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

• get all inputs, selects, and textareas
• filter out all buttons and hidden fields
• filter to only enabled, visible fields
• select the first one
• focus the 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 simply call focusFirst with your parent element or selector.

Selector:

focusFirst('#parentId');

Element:

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

Here's A solution for bootstrap modals developed on top of that by @craztmatt and others. I have extended to have the selection of the target element start at the modal that triggered the event. This one catches inputs, 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 precisely the OP's question but should be adaptable to a pure jquery case too.

Because :visible is a jQuery extension and not part of the CSS specification, queries using :visible cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :visible to select elements, first select the elements using a pure CSS selector, then use .filter(":visible").

Use instead:

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

or:

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

Also bear in mind when using .focus()

Attempting to set focus to a hidden element causes an error in Internet Explorer. Take care to only use .focus() on elements that are visible. To run an element's focus event handlers without setting focus to the element, use .triggerHandler( "focus" ) instead of .focus().

Found this question when looking for a quick solution to select the first input with a blank value.

Came up with the following, hope it helps someone

$(':input[value=""]:enabled:visible:first').focus();