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(){});});}}}])

~……~完毕!

转载于:https://www.cnblogs.com/xiaoluoli/p/6125565.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！