jQuery Dynamically focus on the first INPUT or Tex

问题:

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?

回答1:

This should do it I think

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

回答2:

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

回答3:

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

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

回答4:

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

回答5:

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();
}

回答6:

It's working for me in the load event.

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

回答7:

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

回答8:

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.

回答9:

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().