Vue密码框大写提示

<style type="text/css">
	<!--提示框样式，带三角的提示框-->
    .info {
        margin-top: 5px;
        position: absolute;
        width: 180px;
        height: 35px;
        line-height: 33px;
        background: #F6F1B3;
        box-shadow: 1px 2px 3px #E9D985;
        border: 1px solid #DACE7C;
        border-radius: 4px;
        text-align: center;
        color: black;
    }
    .nav {
        position: absolute;
        top: -8px;
        left: 30px;
        overflow: hidden;
        width: 13px;
        height: 13px;
        background: #F6F1B3;
        border-left: 1px solid #DACE7C;
        border-top: 1px solid #DACE7C;
        transform: rotate(45deg);
    }
</style>

<div id="app">
    	<div id="exmple">
        	<input id="password" type="password" @keypress="onSubmit($event)" v-model="password">
	    </div>
    	<div class="info" v-show="bigChar">
        	<span>大写锁定已打开</span>
        	<div class="nav"></div>
    	</div>
    	<div id="exmple1">
      	  <input id="text" type="username">
  	  	</div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            bigChar: false
        },
        methods: {
            onSubmit: function (event) {
                if (!window.navigator.userAgent.indexOf("MSIE") > -1) {  // 非IE
                    var e = event || window.event;
                    var keyvalue = e.keyCode || e.which;
                    var isShift = e.shiftKey || (keyvalue == 16) || false;
                    if (((keyvalue >= 65 && keyvalue <= 90) && !isShift) || ((keyvalue >= 97 && keyvalue <= 122) && isShift)) {
                        this.bigChar = true;
                    } else {
                        this.bigChar = false;
                    }
                }
            }
        }
    });
</script>

参考：keyup,keydown,keypress的区别
对应的keyCode（键码）和charCode（字符编码）：
1.在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上的一个特定的键对应。对数字字母键，keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同，
2.发生keypress事件意味着按下的键会影响到屏幕中文本的显示。在所有的浏览器中，按下能够插入或者删除字符的键都会触发keypress事件。IE9，FireFox、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时，才包含值，而且这个值是按下的那个键所代表的字符的ASCII编码。此时的keyCode通常等于0或者也可能等于所按键的键码。
https://www.cnblogs.com/mq0036/p/10416717.html