Javascript 在AngularJS中显示表单输入时设置焦点

我用AngularJS创建了一个简单的任务列表

HTML

您可以单击任务进行编辑，但当显示输入字段时，我希望它具有焦点，以便插入符号显示在当前文本末尾的输入字段中。当前，当显示输入字段时，您需要再次单击它以使其具有焦点

我试过各种方法，但不知道怎么做。有人有什么想法吗？

根据，最简单的方法是聚焦元素并设置：

el.selectionStart = el.selectionEnd = el.value.length;

您可以创建一个自定义指令，当某个条件变为true时执行此操作，并将传递给ngShow的相同条件传递给它。 此指令将有效地将光标设置在显示文本字段时文本字段的末尾

例如：

再看这个

确保在所有计划支持的浏览器上测试此功能，因为某些旧浏览器可能不支持某些东西。 我在最新的Chrome v35、最新的Firefox v30和IE v10/11上测试了它，效果很好。

根据，最简单的方法是聚焦元素并设置：

el.selectionStart = el.selectionEnd = el.value.length;

您可以创建一个自定义指令，当某个条件变为true时执行此操作，并将传递给ngShow的相同条件传递给它。 此指令将有效地将光标设置在显示文本字段时文本字段的末尾

例如：

再看这个

确保在所有计划支持的浏览器上测试此功能，因为某些旧浏览器可能不支持某些东西。 我在最新的Chrome v35、最新的Firefox v30和IE v10/11上测试了它，效果很好。

---

尝试在输入中使用自动聚焦，或创建一个将在加载或显示时聚焦于输入的指令尝试在输入中使用自动聚焦，或创建一个将在加载或显示时聚焦于输入的指令

el.selectionStart = el.selectionEnd = el.value.length;

.directive('focusInputOn', function ($timeout) {
  return {
    restrict: 'A',
    link: function focusInputOnPostLink(scope, elem, attrs) {
      attrs.$observe('focusInputOn', function (newValue) {
        if (newValue) {
          // Since the element will become visible (and focusable) after
          // the next render event, we need to wrap the code in `$timeout`
          $timeout(function () {
            var el = elem[0];
            el.focus();
            el.selectionStart = el.selectionEnd = el.value.length;
          });
        }
      });
    }
  };
});

<input type="text" ... ng-show="showInput" focus-input-on="{{showInput}}" />