Question

我在AngularJS中创建了一个简单的任务列表。

HTML

<body ng-app="tasklist" ng-controller="TaskListController as taskListCtrl">
    <div class="container">
        <h1>Task List</h1>

        <form ng-submit="taskListCtrl.addTask(task)">
            <table class="table">
                <tr>
                    <td style="width:20px;"></td>
                    <td><input type="text" ng-model="taskListCtrl.task.text"></td>
                </tr>
            </table>
        </form>

        <table class="table">
            <tr ng-repeat="task in taskListCtrl.tasks | orderBy:['done', '-created']">
                <td style="width:20px;"><input type="checkbox" ng-model="task.done"></td>
                <td class="done-{{task.done}}">
                    <input type="text" ng-model="task.text" ng-blur="showInput=false" ng-show="showInput">
                    <a href="" ng-click="showInput=true" ng-hide="showInput">{{task.text}}</a>
                </td>
            </tr>
        </table>
    </div>
</body>

JS

(function () {
    var app = angular.module('tasklist', []);

    app.controller('TaskListController', function() {
        var taskList = this;

        taskList.tasks = [
            {text:'do something 1', done:false, created:new Date(14, 1, 1)},
            {text:'do something 2', done:true, created:new Date(14, 1, 2)},
            {text:'do something 3', done:false, created:new Date(14, 1, 3)},
            {text:'do something 4', done:true, created:new Date(14, 1, 4)},
            {text:'do something 5', done:true, created:new Date(14, 1, 5)}
        ];

        taskList.addTask = function (task) {
            taskList.task.done = false;
            taskList.task.created = new Date();
            taskList.tasks.push(taskList.task);
            taskList.task = {};
        };
    });

})();

您可以单击任务进行编辑，但是当显示输入字段时，我希望它被赋予焦点，因此插入符出现在当前文本末尾的输入字段中。目前，当显示输入字段时，您需要再次单击它以使其聚焦。

我尝试了各种各样的事情，但无法弄清楚如何去做。有没有人有任何想法？

Answer 1

根据 that answer ，最简单的方法是关注元素并设置：

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

您可以创建一个自定义指令，在某个条件成立时执行该指令（并将其传递给传递给ngShow的相同条件。
当该指令显示时，该指令将有效地将光标设置在文本字段的末尾。

E.g：

.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}}" />

另请参阅此 short demo 。

<子> 请确保在您计划支持的所有浏览器上测试此功能，因为某些较旧的浏览器可能不支持某些内容我在最新的Chrome（v35），最新的Firefox（v30）和IE v10 / 11上进行了测试，它运行良好。

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

1 个答案: