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

~……~完毕!