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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值