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

作者：勤奋的瞌睡猪_715 | 2023-09-03 11:14

如何解决《使用jquery将第一个控件聚焦在表单中》经验，为你挑选了3个好方法。

使用jquery如何在页面加载时将第一个元素(编辑字段,文本区域,下拉字段等)聚焦在表单中？

就像是:

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

但是使用jquery.

另一个要求是,当表单具有class ="filter"时,不要聚焦第一个元素.

1> nickf..：

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

这将选择第一个可见的输入元素(,</code>)不具有类<code>filter</code>的吧.</p></p> <br><br><b>2> Zakaria..：</b><hr><p>对于后台我<em>在rails</em> app <em>上的ruby中</em>使用了脚本.在尝试了所有答案并发现它们都<strong>无法正常工作后</strong>,通过搜索谷歌我发现这个代码片段<strong>有效</strong>:</p> <pre class="brush:bash;">$(function() { $("form:not(.filter) :input:visible:enabled:first").focus(); }); </pre> <p>结果是<code>$('form :input:first')</code>匹配每个表单上的<em>rails</em>插入的隐藏输入.</p></p> <br><br><b>3> tvanfosson..：</b><hr><p>我喜欢用类标记我选择的元素并按类选择,而不是将其保留到页面上元素的顺序.我发现这比在选择可能隐藏或不隐藏的元素时更新我的"真正的第一元素"算法更容易,可能会或可能不会被框架注入,...</p> <pre class="brush:bash;"> $(document).ready( function() { $('input.js-initial-focus:first').focus(); // choose first just in case }); </pre></p> <hr>FWIW - 我现在将用于行为的类添加到"js"之前,以将它们与用于样式的类区分开来.不为行为重用样式类是一个好习惯,这有助于防止这种情况. </div> <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;"> </div> <div class="article_recommend"> <div class="list_top">推荐阅读</div> <div class="ListItems"> <ul class="NewsList"> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/SVG-lt;defs--_Sh_262b098b.html" target="_blank" title="SVG <defs>生成空格">SVG <defs>生成空格</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《SVG<defs>生成空格》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/SVG-lt;defs--_Sh_262b098b.html" target="_blank" title="SVG <defs>生成空格">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/JingTaiYuShiLiFa_78448255.html" target="_blank" title="静态与实例方法的使用">静态与实例方法的使用</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《静态与实例方法的使用》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/JingTaiYuShiLiFa_78448255.html" target="_blank" title="静态与实例方法的使用">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/YouMeiYouBanFaZa_ed14f0ac.html" target="_blank" title="有没有办法在不将整个内容加载到数组中的情况下搜索文件？">有没有办法在不将整个内容加载到数组中的情况下搜索文件？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《有没有办法在不将整个内容加载到数组中的情况下搜索文件？》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/YouMeiYouBanFaZa_ed14f0ac.html" target="_blank" title="有没有办法在不将整个内容加载到数组中的情况下搜索文件？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeJiangTouMing_b318cae7.html" target="_blank" title="如何将透明PNG图像与颜色合并">如何将透明PNG图像与颜色合并</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何将透明PNG图像与颜色合并》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeJiangTouMing_b318cae7.html" target="_blank" title="如何将透明PNG图像与颜色合并">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Cong_WooCommerce_a908f401.html" target="_blank" title="从WooCommerce中删除支付网关">从WooCommerce中删除支付网关</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《从WooCommerce中删除支付网关》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/Cong_WooCommerce_a908f401.html" target="_blank" title="从WooCommerce中删除支付网关">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/netbeans7-3_Zhon_defad5f5.html" target="_blank" title="net beans 7.3中没有Web应用程序选项">net beans 7.3中没有Web应用程序选项</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《netbeans7.3中没有Web应用程序选项》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/netbeans7-3_Zhon_defad5f5.html" target="_blank" title="net beans 7.3中没有Web应用程序选项">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/ShiYongDaiYou_-c_d967b8d1.html" target="_blank" title="使用带有*char的strcmp进行Seg Fault">使用带有*char的strcmp进行Seg Fault</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《使用带有*char的strcmp进行SegFault》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ShiYongDaiYou_-c_d967b8d1.html" target="_blank" title="使用带有*char的strcmp进行Seg Fault">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/DeErFuGengHuanYi_c34b54c8.html" target="_blank" title="德尔福更换一条线">德尔福更换一条线</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《德尔福更换一条线》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/DeErFuGengHuanYi_c34b54c8.html" target="_blank" title="德尔福更换一条线">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeZaiYunXingSh_1cb1a3f5.html" target="_blank" title="如何在运行时检测某些编译器选项(如断言)是否设置为ON？">如何在运行时检测某些编译器选项(如断言)是否设置为ON？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在运行时检测某些编译器选项(如断言)是否设置为ON？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZaiYunXingSh_1cb1a3f5.html" target="_blank" title="如何在运行时检测某些编译器选项(如断言)是否设置为ON？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeHuoQu_Grails_fe0dae09.html" target="_blank" title="如何获取Grails HeaderParam属性">如何获取Grails HeaderParam属性</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何获取GrailsHeaderParam属性》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/RuHeHuoQu_Grails_fe0dae09.html" target="_blank" title="如何获取Grails HeaderParam属性">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/Zai_MicrosoftVis_44b90e42.html" target="_blank" title="在Microsoft Visual C++(而不是托管代码)中如何将PNG打印到打印机？">在Microsoft Visual C++(而不是托管代码)中如何将PNG打印到打印机？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《在MicrosoftVisualC++(而不是托管代码)中如何将PNG打印到打印机？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/Zai_MicrosoftVis_44b90e42.html" target="_blank" title="在Microsoft Visual C++(而不是托管代码)中如何将PNG打印到打印机？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeCong_ffmpeg__0eaba02e.html" target="_blank" title="如何从ffmpeg中打开的文件中获取流信息？">如何从ffmpeg中打开的文件中获取流信息？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何从ffmpeg中打开的文件中获取流信息？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeCong_ffmpeg__0eaba02e.html" target="_blank" title="如何从ffmpeg中打开的文件中获取流信息？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/ShiFouYouKeNengY_f5822410.html" target="_blank" title="是否有可能有多个例外的Try/Catch Throw">是否有可能有多个例外的Try/Catch Throw</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《是否有可能有多个例外的Try/CatchThrow》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/ShiFouYouKeNengY_f5822410.html" target="_blank" title="是否有可能有多个例外的Try/Catch Throw">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/DuiYu_rdfs-range_8b09922e.html" target="_blank" title="对于rdfs:range,将xsd:string限制为[AZ]">对于rdfs:range,将xsd:string限制为[AZ]</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《对于rdfs:range,将xsd:string限制为[AZ]》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/DuiYu_rdfs-range_8b09922e.html" target="_blank" title="对于rdfs:range,将xsd:string限制为[AZ]">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WeiShiMeWoDeMoBa_821d1154.html" target="_blank" title="为什么我的模板功能在此调用中不是有效匹配？">为什么我的模板功能在此调用中不是有效匹配？</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《为什么我的模板功能在此调用中不是有效匹配？》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WeiShiMeWoDeMoBa_821d1154.html" target="_blank" title="为什么我的模板功能在此调用中不是有效匹配？">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/WuFaZaiYinDiWenF_32a44a29.html" target="_blank" title="无法在印地文发送短信">无法在印地文发送短信</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《无法在印地文发送短信》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/WuFaZaiYinDiWenF_32a44a29.html" target="_blank" title="无法在印地文发送短信">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/JuYou_ng-repeat__f9f56e50.html" target="_blank" title="具有ng-repeat的AngularJS隔离指令打破了转换范围">具有ng-repeat的AngularJS隔离指令打破了转换范围</a></h2> </div> <div class="NewsInfo"> <div class="NewsImg"> <a href="https://devbox.cn/p/JuYou_ng-repeat__f9f56e50.html" target="_blank" title="具有ng-repeat的AngularJS隔离指令打破了转换范围"><img src="https://img.devbox.cn/3cccf/16086/243/0d081b960db85daf.png" width="120" height="70" alt="具有ng-repeat的AngularJS隔离指令打破了转换范围"/></a> </div> <div class="NewsDesc" style="width:500px;margin-left:15px;"> 如何解决《具有ng-repeat的AngularJS隔离指令打破了转换范围》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/JuYou_ng-repeat__f9f56e50.html" target="_blank" title="具有ng-repeat的AngularJS隔离指令打破了转换范围">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/RuHeZaiWoDe_Andr_abd549ae.html" target="_blank" title="如何在我的Android应用程序中集成Python脚本(如SL4A)">如何在我的Android应用程序中集成Python脚本(如SL4A)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《如何在我的Android应用程序中集成Python脚本(如SL4A)》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/RuHeZaiWoDe_Andr_abd549ae.html" target="_blank" title="如何在我的Android应用程序中集成Python脚本(如SL4A)">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/LeiXing_--39;T--_b9fb0a86.html" target="_blank" title="类型'T'必须是非可空值类型,以便在泛型类型或方法'System.Nullable <T>'中将其用作参数'T'">类型'T'必须是非可空值类型,以便在泛型类型或方法'System.Nullable <T>'中将其用作参数'T'</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《类型'T'必须是非可空值类型,以便在泛型类型或方法'System.Nullable<T>'中将其用作参数'T'》经验，为你挑选了2个好方法。 ... <a href="https://devbox.cn/p/LeiXing_--39;T--_b9fb0a86.html" target="_blank" title="类型'T'必须是非可空值类型,以便在泛型类型或方法'System.Nullable <T>'中将其用作参数'T'">[详细]</a> </div> <div style="clear:both"></div> </li> <li> <div class="NewTitle"> <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a> <h2><a href="https://devbox.cn/p/LiangGeXianBing__9fd93c00.html" target="_blank" title="两个馅饼,一个带有独特物品的传奇(合并传说)">两个馅饼,一个带有独特物品的传奇(合并传说)</a></h2> </div> <div class="NewsInfo"> <div class="NewsDesc" > 如何解决《两个馅饼,一个带有独特物品的传奇(合并传说)》经验，为你挑选了1个好方法。 ... <a href="https://devbox.cn/p/LiangGeXianBing__9fd93c00.html" target="_blank" title="两个馅饼,一个带有独特物品的传奇(合并传说)">[详细]</a> </div> <div style="clear:both"></div> </li> </ul> </div> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">吐了个 "CAO" !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了


            
                
                                        会员登录 | 用户注册