如何实现输入密码提示大写锁定键

输入密码时提示大写锁定键，尤为是在密码有输入次数限制时显得人性化，那么是怎么实现的呢？

代码实现

实现方法是以 vue + elementUI 做为例子，但用在其它地方也差很少同样。

实现一

---

大体思路：在密码框输入时才进行判断，过滤掉同时按住shift键和字母键的状况，而且密码框失去焦点后就不显示提示。

完整代码

<template>
  <div> <el-input type="password" v-model.trim="userPassword" placeholder="请输入密码" @keyup.native="onkeyup" @keydown.native="onkeydown" @blur="bigChar=false"> </el-input> <el-tag v-show="bigChar" type="warning">大写锁定已打开</el-tag> </div> </template> <script> export default { data () { return { userPassword: '', bigChar: false, shifKey: undefined } }, methods: { onkeyup (event) { const _that = this // 判断是否按键为caps Lock if (event.keyCode === 20) { _that.bigChar = !_that.bigChar return } // 按键不是caps Lock，判断每次最后输入的字母的大小写 let e = event || window.event let keyvalue = e.keyCode ? e.keyCode : e.which let shifKey = this.shifKey if (typeof (_that.userPassword) === 'undefined') return let userPassword = _that.userPassword let strlen = userPassword.length if (strlen) { let uniCode = userPassword.charCodeAt(strlen - 1) // 65到90字母键 if (keyvalue >= 65 && keyvalue <= 90) { // 是否同时按住shift键 if (((uniCode >= 65 && uniCode <= 90) && !shifKey) || ((uniCode >= 97 && uniCode <= 122) && shifKey)) { _that.bigChar = true } else { _that.bigChar = false } } } }, onkeydown (event) { let e = event || window.event let keyvalue = e.keyCode ? e.keyCode : e.which let shifKey = e.shiftKey ? e.shiftKey : ((keyvalue === 16)) this.shifKey = shifKey } } } </script> 复制代码

但这并非完美的实现方式，在密码框未获取焦点前按下caps Lock键亮灯，再点击密码框不输入，按下caps Lock键，会显示大写提示。这就不是咱们想要的效果了。

实现二

---

根据实现一出现的问题，咱们有了实现二。在实现一的基础，当密码框未获取焦点时，加个事件监听大写锁定键，用isFocusPW来判断是否聚焦显示。

完整代码

<template>
  <div> <el-input type="password" v-model.trim="userPassword" placeholder="请输入密码" @keyup.native="onkeyup" @keydown.native="onkeydown" @blur="isFocusPW=false" @focus="isFocusPW=true"> </el-input> <template v-if="isFocusPW"> <el-tag v-show="bigChar" type="warning">大写锁定已打开</el-tag> </template> </div> </template> <script> export default { data () { return { userPassword: '', bigChar: false, shifKey: undefined, isFocusPW: false } }, mounted () { window.addEventListener('keydown', (event) => { let e = event || window.event // 检测大写锁定键 if (e.keyCode === 20) { if (!this.isFocusPW) { this.bigChar = !this.bigChar } } }) } methods: { onkeyup (event) { const _that = this // 判断是否按键为caps Lock if (event.keyCode === 20) { _that.bigChar = !_that.bigChar return } // 按键不是caps Lock，判断每次最后输入的字母的大小写 let e = event || window.event let keyvalue = e.keyCode ? e.keyCode : e.which let shifKey = _that.shifKey if (typeof (_that.userPassword) === 'undefined') return let userPassword = _that.userPassword let strlen = userPassword.length if (strlen) { let uniCode = userPassword.charCodeAt(strlen - 1) // 65到90字母键 if (keyvalue >= 65 && keyvalue <= 90) { // 是否同时按住shift键 if (((uniCode >= 65 && uniCode <= 90) && !shifKey) || ((uniCode >= 97 && uniCode <= 122) && shifKey)) { _that.bigChar = true } else { _that.bigChar = false } } } }, onkeydown (event) { let e = event || window.event let keyvalue = e.keyCode ? e.keyCode : e.which let shifKey = e.shiftKey ? e.shiftKey : ((keyvalue === 16)) this.shifKey = shifKey } } } </script> 复制代码

可是若是是浏览器以外或其它标签页按下的大写锁定键，是没有监听到的，仍是会出现实现一出现的问题，不过我认为能够不考虑，这样就能够了。

总结

一开始作这个功能觉得会很好实现，结果写着写着代码越写越多了:joy:。难怪如今输入密码都不多有这类提示了。