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 相关文章推荐
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
javascript实现英文首字母大写
Apr 23 Javascript
javascript获取select值的方法分析
Jul 02 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
Jul 17 Javascript
深入理解JavaScript中的对象复制(Object Clone)
May 18 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 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
香妃
2021/03/03 冲泡冲煮
php设计模式 Visitor 访问者模式
2011/06/28 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
php批量删除操作代码分享
2017/02/26 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python字符串处理实例详解
2017/05/18 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
技术总监岗位职责
2013/12/05 职场文书
《一个中国孩子的呼声》教学反思
2014/02/12 职场文书
维修工先进事迹
2014/05/29 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
2014年客户经理工作总结
2014/11/20 职场文书