Angular解决输入框由禁用状态转可用状态自动获取焦点失效问题
发布时间：2020-12-17 09:53:29 所属栏目：安全 来源：网络整理
导读：有时为了方便操作，我们会为输入框设置默认焦点。而且会设置输入权限，会禁止用户输入。 但是当从禁止输入切换为可输入的时候，输入框却不能设置焦点了。 原因的话，我看了一下，估计是当我们改变输入框绑定的值得时候，输入框并没有切换状态，还是禁用状态
|
有时为了方便操作，我们会为输入框设置默认焦点。而且会设置输入权限，会禁止用户输入。 但是当从禁止输入切换为可输入的时候，输入框却不能设置焦点了。 原因的话，我看了一下，估计是当我们改变输入框绑定的值得时候，输入框并没有切换状态，还是禁用状态，所以我们无法设置焦点，就是执行顺序的问题。 上代码吧，写个指令，设置输入框焦点。 <!DOCTYPE html> <html ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.js"></script> <script src="angular.js"></script> <script> angular.module("app",[]) .controller("ctrl",function($scope) { $scope.data = [{ name: "aaa",type: "string" },{ name: "bbb",type: "int" },{ name: "ccc",type: "float" }]; $scope.init = function() { $scope.dim = $scope.data[0]; } $scope.changeDim = function(i){ $scope.dim = i; } }) .directive("setFocus",function(){ return { scope:{ ngModel:"=" },link:function(scope,element,attrs){ scope.$watch("ngModel",function(n,o){ element.focus(); }) } } }) </script> </head> <body ng-init="init()" ng-controller="ctrl"> <ul> <li ng-repeat="item in data" ng-click="dim = item"> <a ng-click="changeDim(item)">{{item.name}}</a> </li> </ul> <input type="text" id="name" ng-disabled="dim.type == 'string'" ng-model="dim.name" set-focus> </body> </html>
效果： 此文档的作者：justforuse Github Pages：justforuse （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |