最近手头上的项目有一个需求就是输入框不能输入表情,然后就各种在网上找资料,网上好多人给的方案是:
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>
<textarea @input="forbidInput" ></textarea>
<input @input="forbidInput" />
</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