Angular指令实践之type等于text的input星号输入
大家都知道input有passwor输入,但是这种会自动记忆密码,尤其是某些浏览器本身没有相关清空操作,所以还是不安全。
上代码,用Angular指令来实现星号密码输入。
html
<input type="text" placeholder="输入字符串" ng-model="pwd" password="password"> password:{{password}}
js
var app=angular.module("myapp",[]); app.controller("pwdController",["$scope",function($scope){
//初始化 $scope.password=""; }]); app.directive('password',['$timeout',function($timeout){ return { restrict:"AE", scope:{ password:"=password" }, link:function(scope,ele,attr){ scope.replaceStar=function(str){ var L=str.length; var star=""; for(var i=0;i<=L-1;i++){ star=star+"*"; } return star; } //监控 scope.$watch("password",function(newValue,oldValue){ if(!newValue){return} var star=scope.replaceStar(newValue); $(ele).val(star); $(ele).attr("backup",newValue); }); //禁止鼠标移动中部,只能从尾部添加 $(ele).on("click",function(evt){ var t=$(this).val(); $(this).val("").focus().val(t); }); $(ele).on("keydown",function(evt){ var code=evt.keyCode;
//禁止键盘事件 if(evt.ctrlKey){ evt.preventDefault(); evt.stopPropagation(); return; } if(code==37||code==38||code==39||code==40||code==32){ evt.preventDefault(); evt.stopPropagation(); return; }
//密码尾部删除 if(code==8){ var str=$(ele).attr("backup"); var L=str.length; var s=str.substr(0,L-1); $(ele).attr("backup",s); scope.password=s; $timeout(function(){}); } }); $(ele).on('keypress',function(evt){ evt.preventDefault(); evt.stopPropagation(); var key=evt.key;
//添加属性 if(!$(ele).attr("backup")){ $(ele).attr("backup",key); } else{ var str=$(ele).attr("backup"); $(ele).attr("backup",str+key) }
//替换成星号 var star=scope.replaceStar($(ele).attr("backup")); $(ele).val(star); scope.password=$(ele).attr("backup");
//当绑定不能实现时,一般加上timeout即可(前人经验) $timeout(function(){}); }); } } }])
~……~完毕!