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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
浅谈Node.js爬虫之网页请求模块
Jan 11 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 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 批量更新网页内容实现代码
2010/01/05 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
JavaScript静态的动态
2006/09/18 Javascript
javascript中的对象创建 实例附注释
2011/02/08 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
js借助ActiveXObject实现创建文件
2013/09/29 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
python中类的属性和方法介绍
2018/11/27 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python多进程编程常用方法解析
2020/03/26 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
车贷收入证明范本
2014/09/14 职场文书
医德医风自我评价
2014/09/19 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
公司转让协议书
2016/03/19 职场文书
探讨Java中的深浅拷贝问题
2021/06/26 Java/Android
mysql脏页是什么
2021/07/26 MySQL