Vue.js密碼框大小寫提示

前言

在寫項目調前端時有如下需求：密碼框大寫時需要加以提示；
項目組件使用的基本是element-ui，由於自己對前端不對熟悉，在這裏做下筆記，也算是給大家提供下參考。

具體實現

首先是密碼框（主要是這句：@keyup.native=“loginKeyDown”）

<li>
    <el-input prefix-icon="el-icon-lock" type="password" v-model.trim="loginFrom.password"
placeholder="密碼" @keyup.native="loginKeyDown" clearable @keyup.enter.native="loginFn"></el-input>
	<div style="height:15px">&nbsp;<el-tag v-show="bigChar" style="margin-left:20px">大寫鎖定已打開</el-tag></div>
</li>

添加兩個字段

firstTochar:false,
bigChar:false,

添加鍵盤事件

loginKeyDown(event){
    const _that=this;
    //是否輸入過字母鍵，且判斷是否按鍵爲caps lock
    if(_that.firstTochar){
        if(event.keyCode===20){
            _that.bigChar=!_that.bigChar;
            return;
        }
    }
    //未輸入過字母鍵，或按鍵不是caps lock，判斷每次最後輸入的字符的大小寫
    var e = event||window.event;
    var keyvalue = e.keyCode ? e.keyCode : e.which;
    var shifKey = e.shiftKey ? e.shiftKey:((keyvalue == 16) ? true : false);
    if(typeof(_that.loginFrom.password)==='undefined'){
        return;
    }
    var strlen = _that.loginFrom.password.length;
    var password=_that.loginFrom.password;

    if(strlen){
        var uniCode =password.charCodeAt(strlen-1);
        if(keyvalue>=65 && keyvalue<=90){     
            //如果是字母鍵                    
            _that.firstTochar=true;
            if(((uniCode >= 65 && uniCode <= 90) && !shifKey)||((uniCode >= 97 && uniCode <= 122) && shifKey)){
                _that.bigChar=true;
            }else{
                _that.bigChar=false;
            }
        }
    }
},

原理大致如下：

當鍵盤事件觸發時，判斷最後輸入的字符是不是英文字符，如果是的話，判斷其大小寫，並賦值給bigChar（大寫爲true，小寫爲false)；
而以後每次鍵盤事件觸發時，如果是caps lock鍵的話，就直接令bigChar取反即可。