vue.js 输入框输入值自动过滤特殊字符替换中问标点操作


Posted in Javascript onAugust 31, 2020

我就废话不多说了,大家还是直接看代码吧~

<Input v-model="relatedWords" type="textarea" placeholder="请输入" @input='verifyInput(formItem.relatedWords)'/>

verifyInput(v){
  let _this=this;
  let punctuation = /[`~!@#$%^&*_\-=<>?:"{}|.\/;'\\[\]·~!@#¥%……&——\-={}|《》?:“”【】、;‘'。、]/im;
  let arr=v.split('')
  let str=''
  arr.map(i=>{
    if(!punctuation.test(i)){
     str+=i
    }
  })
  str=str.replace(/(/g,'(')
  str=str.replace(/)/g,')')
  str=str.replace(/,/g,',')
  this.$nextTick(j=>{
    this.relatedWords=str
  })
},

补充知识:vue el-input 禁止输入特殊字符 只可输入数字 正则验证

我就废话不多说了,大家还是直接看代码吧~

<el-input
 size="small"
 v-model="city"
 placeholder="请输入城市名称"
 @blur="addCity(scope.$index)"
 @keyup.native="btKeyUp"
 @keydown.native="btKeyDown"
></el-input>
 
// methods内 
 
   // 只能输入汉字、英文、数字
  btKeyDown(e) {
    e.target.value = e.target.value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,"");
  },
  //限制输入特殊字符
  btKeyUp(e) {
    e.target.value = e.target.value.replace(/[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%……&*()——\-+={}|《》?:“”【】、;‘',。、]/g,"");
  }

在el-input 内 使用 keyup等事件 需要添加 .native 否则无法正常执行事件

下面是 只可输入数字

<el-input
  size="small"
  v-model="scope.row.order_number"
  v-show="scope.row.isShowInp_order"
  @blur="editOrder(scope.$index,scope.row)"
  v-focus
  @keyup.native="UpNumber"
  @keydown.native="UpNumber"
  class="table_input"       
></el-input>  
 
// 只可输入数字 
  UpNumber(e) {
    e.target.value = e.target.value.replace(/[^\d]/g,"");
  }

以上这篇vue.js 输入框输入值自动过滤特殊字符替换中问标点操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
使用GruntJS构建Web程序之构建篇
Jun 04 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
Dec 12 Javascript
微信小程序实现留言功能
Oct 31 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 #Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 #Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 #Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
Aug 31 #Javascript
JS遍历树层级关系实现原理解析
Aug 31 #Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 #Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 #Javascript
You might like
JQuery 学习笔记 选择器之四
2009/07/23 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jquery操作checkbox实现全选和取消全选
2014/05/02 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
2019/11/14 Javascript
微信小程序实现音乐播放器
2019/11/20 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python CSV模块使用实例
2015/04/09 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
linux面试题参考答案(9)
2015/01/07 面试题
服装设计行业个人的自我评价
2013/12/20 职场文书
小学生家长评语集锦
2014/01/30 职场文书
初三政治教学反思
2014/01/30 职场文书
保洁员岗位职责
2015/02/04 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
如何用Node.js编写内存效率高的应用程序
2021/04/30 Javascript
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python