有什么方法可以将焦点指向表单上的特定输入字段？答案

【问题标题】：Is there any way I can direct focus to a specific input field on a form?有什么方法可以将焦点指向表单上的特定输入字段？
【发布时间】：2016-10-05 12:41:39
【问题描述】：

我有一个很大的表单，我希望当用户单击“新建”按钮以将焦点放置在特定输入字段中时。表单上有一个网格，每个字段都有一个已知的 id。请注意，它可能不是第一个字段，因此不容易使用该选项卡。

如果可能的话，我们将不胜感激。将不必手动让用户移动光标并单击输入字段。

更新：将“移动光标”改为“改变焦点”

【问题讨论】：

你可以使用focus事件
只是好奇为什么你认为为他们移动用户的鼠标是更好的 UX。这真是令人震惊和迷失方向。我建议另一种方法，就像 pwolaq 建议的那样专注。
是的，你是正确的。我想使用焦点事件，但不太确定如何执行此操作。谢谢
你需要一个指令，这样你就可以跟踪焦点状态。我对不同问题的回答可能会有所帮助：stackoverflow.com/a/17739731/158523
关于 angularJS 输入字段焦点的好链接：stackoverflow.com/questions/14833326/…

标签： angularjs

【解决方案1】：

这是一种解决方案 -

Angular js 为您提供了使用一些额外功能的优势，因此您不必使用 jquery。

这是实现自动对焦功能的一种方法。

<div class="button" input-focus>{{element.idORname}}</div>

以及要在此处定义的指令。

.directive("inputfocus",function($timeout){
           return {
                    link : function(element,attributes){
                    element.bind('click',function($timeout){
                       $timeout(function(){
                          element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
                          );
                        );
                      );

如果您的代码中有nested 字段，您可以在这里使用javascript 或jquery 方法进行dom 遍历。

当用户完成点击事件时，浏览器呈现后调用焦点需要$timeout

如您所见，find('')[0] 是 find('').focus 的替代品，因为后者需要使用 jquery。

【讨论】：

【解决方案2】：

在你想要聚焦的元素上放置“autofocus”属性。

例子：

Name: <input type="text" name="name" autofocus />

【讨论】：

【解决方案3】：

如果所有输入 id 都是已知的，则使用它。

$("#NewButton").on('click', function(){
    //Other code.
    $("#IdOfInputToBeFocused").focus();
});

【讨论】：

【解决方案4】：

自定义数据属性可以像这样与jQuery一起使用

<input data-field="special" />

然后可以像这样调用特定的字段

jQuery('input').find("[data-field='special']").focus();

【讨论】：