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 Object的extend是一个常用的功能
Dec 02 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
js实现文字选中分享功能
Jan 25 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
angular.js实现购物车功能
Oct 23 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
html5调用摄像头截图功能
Jan 18 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 array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php session 写入数据库
2016/02/13 PHP
PDO::setAttribute讲解
2019/01/29 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
pytorch梯度剪裁方式
2020/02/04 Python
使用Python发现隐藏的wifi
2020/03/04 Python
浅谈django channels 路由误导
2020/05/28 Python
Python发送邮件实现基础解析
2020/08/14 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
《望洞庭》教学反思
2014/02/16 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
Python源码解析之List
2021/05/21 Python