设置焦点显示AngularJS表单输入时 [英] Setting focus when showing a form input in AngularJS
问题描述
我在AngularJS创建了一个简单的任务列表。
I've created a simple task list in AngularJS.
http://jsfiddle.net/simonbingham/RX63v/
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 = {};
};
});
})();
您可以点击一个任务可以编辑它，但是当显示输入字段，我想这样的插入符号在当前文本的末尾出现在输入字段它被赋予焦点。目前，当输入字段显示您需要再次点击它，给它焦点。
You can click a task to edit it, but when the input field is shown I would like it to be given focus so the caret appears in the input field at the end of the current text. Currently when the input field is shown you need to click it again to give it focus.
我已经试过各种事情，但无法弄清楚如何做到这一点。没有人有任何想法？
I've tried various things, but can't figure out how to do it. Does anyone have any ideas?
推荐答案
据 <一个href=\"http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element#answer-10576409\">that回答 ，最简单的方法是把重点元素，并设置：
According to that answer, the simplest way is to focus the element and set:
el.selectionStart = el.selectionEnd = el.value.length;
您可以创建确实，当特定条件为真自定义指令（并通过它传递给 ngShow 相同的条件下。结果
该指令，将有效地设置光标在文本字段的结尾，当它得到的显示。
You can create a custom directive that does that when a certain condition becomes true (and pass it the same condition that is passed to ngShow.
This directive, will effectively set the cursor at the end of the text-field, when it get's displayed.
例如：
.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}}" />
又见这个 短演示
See, also, this short demo.
<子>
确保你的计划支持所有浏览器中测试这个功能，因为一些老的浏览器可能不支持某些事情。结果
我测试了最新的Chrome（V35），最新的Firefox（V30）和IE V10 / 11，它工作正常。
这篇关于设置焦点显示AngularJS表单输入时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
