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 相关文章推荐
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
微信小程序云开发之新手环境配置
May 16 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
node.js如何根据URL返回指定的图片详解
Oct 21 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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
smarty实例教程
2006/11/19 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
php排序算法实例分析
2016/10/17 PHP
JS Array对象入门分析
2008/10/30 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
python str字符串转uuid实例
2020/03/03 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
Watchshop德国:欧洲在线手表No.1
2019/06/20 全球购物
承办会议欢迎词
2014/01/17 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
高一地理教学工作总结
2015/08/12 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书