Question

使用jquery如何聚焦第一个元素（编辑字段，文本区域，下拉字段等）在页面加载时的形式？

类似的东西：

document.forms[0].elements[0].focus();

但是使用jquery。

另一个要求是，当表单具有class =“filter”时，不要聚焦第一个元素。

Answer 1

$('form:not(.filter) :input:visible:enabled:first').focus()

这将选择其中没有类<input />的第一个可见输入元素（<select>，<textarea>，filter）。

Answer 2

对于后台我在 ruby on rails 应用程序中使用了该脚本。在完成所有答案并发现所有不起作用之后，通过搜索谷歌，我发现有效：

的这个片段

$(function() {
  $("form:not(.filter) :input:visible:enabled:first").focus();
});

结果$('form :input:first')匹配 rails 在每个表单上插入的隐藏输入。

Answer 3

我喜欢用类标记我选择的元素并按类选择，而不是将其保留到页面上元素的顺序。我发现这比在选择可能隐藏或不隐藏的元素时更新我的“真正的第一元素”算法更容易，可能会或可能不会被框架注入，...

  $(document).ready( function() {
     $('input.js-initial-focus:first').focus(); // choose first just in case
  });

Answer 4

这不是单行解决方案，但它考虑了真实第一个用户输入字段（可能是＆lt; input /＆gt;或＆lt; select＆gt;标记）。

你只需要多调整一下，就可以得到你需要的东西。

P.S：我已经测试过此代码适用于FireFox，Chrome和IE6。

function focusFirstFormField() {
    try {
        var selector = $("#formid");
        if (selector.length >= 1 && selector[0] && selector[0].elements && selector[0].elements.length > 0) {
            var elements = selector[0].elements;
            var length = elements.length;
            for (var i = 0; i < length; i++) {
                var elem = elements[i];
                var type = elem.type;

                // ignore images, hidden fields, buttons, and submit-buttons
                if (elem.style.display != "none" /* check for visible */ && type != "image" && type != "hidden" && type != "button" && type != "submit") {
                    elem.focus();
                    break;
                }
            }
        }
    }
    catch(err) { /* ignore error if any */ }
}

Answer 5

$("form").find('input[type=text],textarea,select').filter(':visible:first').focus();

Answer 6

我在jQuery对话框上遇到了一些问题，这些对话框在页面上是不可见的，但仍然被选择器选中：

$(":text:visible:enabled:first").focus();

经过大量的游戏后，我终于提出了一个解决方案，通过在末尾添加“.not（）”来排除div中所有输入，并使用.dialog类。这可能对其他人有用。这是我的选择器：

$(":text:visible:enabled:first").not("div .dialog input").focus();

使用jquery将第一个控件聚焦在表单中

6 个答案: