项目中引入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事件中将输入的东西替换成点点点,才能达到了密码框的效果,否则无法存储到对应的明文来传给后台