1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue下实现textarea类似密码框的功能之探索input输入框keyup keydown input事件的触发顺序...

vue下实现textarea类似密码框的功能之探索input输入框keyup keydown input事件的触发顺序...

时间:2020-11-03 17:32:04

相关推荐

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。