vue.js 输入框输入值自动过滤特殊字符替换中问标点操作

 更新时间:2020年08月31日 11:03:59   作者:一行注释  
这篇文章主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

我就废话不多说了,大家还是直接看代码吧~

<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 输入框输入值自动过滤特殊字符替换中问标点操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue项目启动如何设置默认启动页

    vue项目启动如何设置默认启动页

    这篇文章主要介绍了vue项目启动如何设置默认启动页问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 浅析Vue中method与computed的区别

    浅析Vue中method与computed的区别

    在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
    2018-03-03
  • vue3.0在子组件中触发的父组件函数方式

    vue3.0在子组件中触发的父组件函数方式

    这篇文章主要介绍了vue3.0在子组件中触发的父组件函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • nuxt静态部署打包相对路径操作

    nuxt静态部署打包相对路径操作

    这篇文章主要介绍了nuxt静态部署打包相对路径操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 解决vue2 在mounted函数无法获取prop中的变量问题

    解决vue2 在mounted函数无法获取prop中的变量问题

    这篇文章主要介绍了vue2 在mounted函数无法获取prop中的变量的解决方法 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • vue项目中常用解决跨域的方法总结(CORS和Proxy)

    vue项目中常用解决跨域的方法总结(CORS和Proxy)

    在vue项目中,一般我们会遇到跨域的问题,vue项目中解决跨域是非常简单的,下面这篇文章主要给大家介绍了关于vue项目中常用解决跨域的方法,主要解释CROS和Proxy两种方式,需要的朋友可以参考下
    2022-12-12
  • 详解Vuex管理登录状态

    详解Vuex管理登录状态

    这篇文章主要介绍了详解Vuex管理登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue-cli创建项目及项目结构解析

    vue-cli创建项目及项目结构解析

    上一篇我们安装了vue-cli,接下来我们就使用该脚手架进行创建项目,这篇文章主要介绍了vue-cli创建项目以及项目结构的相关资料,需要的朋友可以参考下面文章的具体内容
    2021-10-10
  • vue中使用pdfjs-dist + turnjs实现页面的翻书浏览功能

    vue中使用pdfjs-dist + turnjs实现页面的翻书浏览功能

    这篇文章主要介绍了vue中使用pdfjs-dist + turnjs实现页面的翻书浏览,通过本文学习我们知道了pdfjs-dist 的工作原理是把获取到的 pbf 的文件的数据流, 利用 canvas转换成图片,本文通过实例代码详解讲解,需要的朋友可以参考下
    2022-10-10
  • vue如何根据数值判断颜色

    vue如何根据数值判断颜色

    这篇文章主要介绍了vue如何根据数值判断颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论