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应该怎样学
Apr 16 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
谈谈对offsetleft兼容性的理解
Nov 11 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
简单了解JavaScript异步
May 23 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
我的论坛源代码(四)
2006/10/09 PHP
使用php实现截取指定长度
2013/08/06 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php格式化json函数示例代码
2016/05/12 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
js替换字符串的所有示例代码
2013/07/23 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
JavaScript中双向数据绑定详解
2017/05/03 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Django框架实现的分页demo示例
2019/05/25 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
Desigual英国官网:在线购买原创服装
2018/03/09 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
《放飞蜻蜓》教学反思
2014/04/27 职场文书
国际商务专业求职信
2014/07/15 职场文书
放飞理想演讲稿
2014/09/09 职场文书
先进教师个人总结
2015/02/11 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Mysql 一主多从的部署
2022/05/20 MySQL
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server