我有一个文本框和一个选项列表,可以将选项添加到该框中的当前文本中。我遇到的问题是,当我单击一个选项并将该选项添加到文本中时,我希望将光标放回文本框中,以便用户可以继续键入。非常感谢任何帮助。
文本字段:
input type='text' ng-model='comment.text' ng-change='userList(comment.text)'
JS:
$scope.addUserToComment = function(user) {
$scope.comment.text += user + " ";
$scope.usersShow = false;
};
最佳答案
避免修改 Controller 中的 DOM。
编辑:但是为了回答你的问题,ng-focus是我太懒了。
我会创建一个指令
angular.module('focus-me', []).
.directive('focusMe', function(){
return {
scope: { watch_this: '=' },
link: function(scope, element, attrs){
scope.$watch('watch_this', function(){
$(element).focus();
}
}
}
});
这给了你两个选择
input type='text' focus-me='comment.text' ng-model='comment.text' ng-change='userList(comment.text)'
或
input type='text' focus-me='some_obj_attr_you_toggle' ng-model='comment.text' ng-change='userList(comment.text)'
当您打字时,第一个将调用观察器函数超过必要的次数(没什么大不了的)。
只有当您在 addUserTo 函数中切换 attr 时,2nd 才会调用观察程序函数。
更简单的方法(尽管您正在修改 Controller 中的 dom)是:
$scope.addUserToComment = function(user, $event) {
$($event.target).find('css selector to navigate to textbox').focus();
$scope.comment.text += user + " ";
$scope.usersShow = false;
};
在您的 ng-click 中添加另一个参数
ng-click='addUserToComment(user, $event)'
PS。代码可能不是 100% 正确,但您明白了。
关于javascript - 单击后返回文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22819625/