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

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

Java窗口（JFrame）从零开始（8）——文本框+文本域+密码框
应该最后一章了,前面有大神提到很少有人用Java做UI,这里就算是给像我这样的初学者去了解窗体是怎么一回事的文章吧文本框(JTextField) 构造方法摘要 JTextField() 构造一个新的 ...
angularjs html 支付宝支付,angular仿支付宝密码框输入效果
项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款 ...
360浏览器，qq浏览器等登录页输入账号密码，在页面内再次遇见有密码框的地方会自动填充的解决办法。
在360浏览器,qq浏览器等登录页输入账号密码,在页面内再次遇见有密码框的地方会自动填充,在网上没有找到合适的解决办法,然后自己琢磨了一个,仅供参考. 登录页的账号密码输入框不需要做任何变化. 我们可 ...
HTML密码框添加小眼睛和x按钮。
**此篇文章为个人原创,欢迎参考学习** //本文主要讲解密码框添加小眼睛例子和账号输入框添加X图片做清除功能. //实现这个功能很容易,或许你们有其它方法实现,欢迎来交流! //我先来说说我的思路. ...
ajax实现搜索提示源码,Jquery实现搜索框提示功能示例代码
博客的前某一篇文章中http://www.jb51.net/article/35175.htm写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发现,真的反应很慢,数 ...
Vue.js 极简小例：表单（输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...
Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 1.Vue表单原生JS实现异步表单提交运行截图代码核心指令单选框.密码框.多行文本框单选多选勾 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
java 获取密码框密码,获得Windows下的密码框密码--编程学习网
获得Windows下的密码框密码,似乎是很多人感兴趣的话题,CSDN上问这类问题的人不计其数--这样看来,老罗也不能免俗啦,今天就让我跟大家探讨一下如何实现这一功能吧.^_^ 我们知道,Windows ...

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

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

最新文章

热门文章