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取反即可。