vue下實現textarea相似密碼框的功能之探索input輸入框keyup，keydown，input事件的觸發順序

項目中引入element的input框組件，觸發事件必需要加上.native

<el-input placeholder="請輸入" type="textarea" v-model="valueText" @keyup.native="keyUp(valueText,$event)"  @keydown.native="keyDown($event)" @input="input">
                    </el-input>
複製代碼

keyDown(event:any){
    //ctrl複製粘貼事件（true|false）
    this.isCtrl = event.ctrlKey
    console.log('keyDown：',this.isCtrl)
}
input(value:any){
    let newStr='';
    this.valueCtrl = ''
    let str = value.substring(value.length-1,value.length);
    this.valueyArr.push(str);
    for (let i = 0; i < this.valueyArr.length; i++) {
        newStr+= this.valueyArr[i]
    }
    this.valueShow = newStr // 輸入的明文
    if(value.length<this.appPrivateKeyShow.length){
        //退格刪除
        this.appPrivateKeyArr = this.appPrivateKeyArr.slice(0,value.length)
        this.appPrivateKeyShow = this.appPrivateKeyShow.substring(0,value.length)
    }
    console.log('input：',this.valueShow)
}
keyUp(value:any,event:any){
    if(this.isCtrl&&!this.valueCtrl){
        this.valueCtrl = value //  粘貼的明文
        this.valueShow = ''
    }
    this.valueText =  value.replace(/./g, '.'); // 替換成密文點點
    console.log('keyUp：',this.valueCtrl)
}
複製代碼

純手動輸入：

帶鍵盤ctrl事件：

能夠發現執行順序：keydown>input>keyup 因此必須在keyup事件中將輸入的東西替換成點點點，才能達到了密碼框的效果，不然沒法存儲到對應的明文來傳給後臺