vue 监听input输入框禁止换行,禁止输入emoji表情
2021-02-07 本文已影响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, '')" />