如何實現輸入密碼提示大寫鎖定鍵

登陸框

輸入密碼時提示大寫鎖定鍵,尤爲是在密碼有輸入次數限制時顯得人性化,那麼是怎麼實現的呢?javascript

代碼實現

實現方法是以 vue + elementUI 做爲例子,但用在其它地方也差很少同樣。 vue

實現一


大體思路:在密碼框輸入時才進行判斷,過濾掉同時按住shift鍵和字母鍵的狀況,而且密碼框失去焦點後就不顯示提示。java

完整代碼瀏覽器

<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鍵,會顯示大寫提示。這就不是咱們想要的效果了。ui

實現二


根據實現一出現的問題,咱們有了實現二。在實現一的基礎,當密碼框未獲取焦點時,加個事件監聽大寫鎖定鍵,用isFocusPW來判斷是否聚焦顯示。this

完整代碼spa

<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> 複製代碼

可是若是是瀏覽器以外或其它標籤頁按下的大寫鎖定鍵,是沒有監聽到的,仍是會出現實現一出現的問題,不過我認爲能夠不考慮,這樣就能夠了。code

總結

一開始作這個功能覺得會很好實現,結果寫着寫着代碼越寫越多了:joy:。難怪如今輸入密碼都不多有這類提示了。cdn

相關文章
相關標籤/搜索