jQuery：如何找到第一个可见的输入/选择/文本区域，不包括按钮？

Posted 2023-02-22

【中文标题】jQuery：如何找到第一个可见的输入/选择/文本区域，不包括按钮？

【英文标题】：jQuery: how to find first visible input/select/textarea excluding buttons?

【发布时间】：2011-02-18 21:21:50

【问题描述】：

我试过了

$(":input:not(input[type=button],input[type=submit],button):visible:first")

但它什么也没找到。

我的错误是什么？

UPD：我在 $(document).load() 上执行此操作

<script type="text/javascript">
$(window).load(function () 
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
);
</script>

在调试中我可以看到 firstInput 是空的。

UPD2： 我在 Sharepoint 下运行的 ASP.NET 页面中。

到目前为止，我发现对于某些元素，它确实找到了它们（对于固定的元素），而有些则没有。 :(

【问题讨论】：

试试“input”而不是“:input”？

应该可以正常工作。你的问题出在其他地方。你不是在执行这个之前 $(document) 是ready() 吗？

您是否有特定的 html 可供搜索？

也许第一个输入是type="hidden"？右键单击页面并查看源代码。生成的 HTML 也很重要。没有它和正确的SSCCE，它在黑暗中拍摄。

【参考方案1】：

为什么不只定位你想要的 (demo)？

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

编辑

或者使用 jQuery :input 选择器来过滤表单后代。

$('form').find('*').filter(':input:visible:first');

【讨论】：

复选框？收音机？密码？更不用说许多新的 HTML5 输入类型了。

@BalusC $('form').find(':input').filter(':visible:first')

虽然这在某种程度上有效，但它确实忽略了 tabindex 属性。

小挑剔但有用的补充：代替 ':visible:first'，':visible:enabled:first' 将是一个更好的过滤器，因为在某些情况下可以禁用顶部元素和焦点不能移到那里。

@PrahladYeri 也许也排除只读':input:visible:enabled:not([readonly]):first'

【参考方案2】：

JQuery 代码很好。您必须在就绪处理程序中执行，而不是在窗口加载事件中执行。

<script type="text/javascript">
$(function()
  var aspForm  = $("form#aspnetForm");
  var firstInput = $(":input:not(input[type=button],input[type=submit],button):visible:first", aspForm);
  firstInput.focus();
);
</script>

更新

我尝试了 Karim79 的示例（感谢示例），它工作正常：http://jsfiddle.net/2sMfU/

【讨论】：

感谢@BalusC。我现在要去开枪了。我恨我自己。我本可以在最后一个小时里不弄乱工作代码。我可以喂我的狗，打扫我的厨房。有很多事情我可以实现。现在我只有痛苦。再见，永远......是的，我应该听过。

@karim: rofl。不客气 :) 顺便说一句：我已经给我的孩子洗澡，带他们上床，喂了狗和猫，给自己喝了可口可乐；）

【参考方案3】：

这是我对上述内容的总结，非常适合我。感谢您的信息！

<script language='javascript' type='text/javascript'>
    $(document).ready(function () 
        var firstInput = $('form').find('input[type=text],input[type=password],input[type=radio],input[type=checkbox],textarea,select').filter(':visible:first');
        if (firstInput != null) 
            firstInput.focus();
        
    );
</script>

【参考方案4】：

这是对@Mottie 答案的改进，因为从 jQuery 1.5.2 开始，:text 选择了没有指定 type 属性的 input 元素（在这种情况下，隐含了 type="text"）：

$('form').find(':text,textarea,select').filter(':visible:first')

【参考方案5】：

这是我的解决方案。代码应该很容易理解，但这里的想法是：

获取所有输入、选择和文本区域 过滤掉所有按钮和隐藏字段 过滤到仅启用的可见字段 选择第一个 聚焦所选字段

代码：

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

然后只需使用您的父元素或选择器调用 focusFirst。

选择器：

focusFirst('form#aspnetForm');

元素：

var el = $('form#aspnetForm');
focusFirst(el);

【参考方案6】：

你可以试试下面的代码...

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<form>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
    
<input type="submit" />
</form>