美文网首页
vue 监听input输入框禁止换行,禁止输入emoji表情

vue 监听input输入框禁止换行,禁止输入emoji表情

作者: 臭臭的胡子先生 | 来源:发表于2021-02-07 09:36 被阅读0次

最近手头上的项目有一个需求就是输入框不能输入表情,然后就各种在网上找资料,网上好多人给的方案是:

str = str.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");'
或者这种
str = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;

//用法
<input onkeyup = "this.value = value.replace(str, "")">;

这种的在移动端兼容上面并没有什么效果

通过自己多方面尝试,大量测试,用下面这种方式可以兼容大部分手机禁止输入emoji
同时禁止在输入框内回车换行

</script>
<template>
  <div>
     <textarea @input="forbidInput" ></textarea>
     <input @input="forbidInput" />
  </div>
</template>
 methods:{
   forbidInput(e){
      let value = e.target.value
      //禁止输入emoji表情,兼容大部分手机
      value = value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig, '')
      value = value.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, ""); 
      value = value.replace(/[\uE000-\uF8FF]/g, '');
      //禁止回车换行
      value = value.replace(/<\/?.+?>/g,""); 
      value = value.replace(/[\r\n]/g, ""); 
      return e.target.value = value
    },
 }
<script>

想要暴力解决禁止输入问题可以使用下面这种方式,但是这种就无法输入空格等特殊字符,根据项目需求选择吧

<input type="text" id="ipt1" oninput="value = value.replace(/[^\u4E00-\u9FA5|\d|\a-zA-Z|\r\n\s,.?!,。?!…—&$=()-+/*{}[\]]|\s/g, '')" />

相关文章

网友评论

      本文标题:vue 监听input输入框禁止换行,禁止输入emoji表情

      本文链接:https://www.haomeiwen.com/subject/nukotltx.html