vue el-input中禁止输入表情符号
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
项目中测试提出问题,在Input输入框中输入表情后,后台会报错,于是想着在前端输入的时候禁止输入表情,或者点击win10输入法后面的表情时,禁止输入表情
在网上看到一些方法,参考地址,可以实现实现输入的时候不能输入表情,但是鼠标点击win10输入框后面的表情时,还是能输入的。
所以我对以上方法做了一点改造,实现了我想要的效果,如下图所示:
主要是对原博主的文章做了如下图所示的修改:
完整代码是在main.js中加入一些代码,自定义一个清除表情的属性
import emojiRegex from 'emoji-regex'; // npm install emoji-regex
Vue.directive('clearEmoij', {
bind(el, binding, vnode, oldVnode) {
const regex = emojiRegex();
const obj = el.querySelectorAll('.el-input__inner,.el-textarea__inner')[0];
const zclearNoNum = function(e) {
if (e.target.composing) return;
const match = regex.exec(obj.value); // 也可以直接用正则表达式判断
if (match) {
/* for (let i=0;i<match.length;i++) {
obj.value = obj.value.replace(match[i],"");
}*/
obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
zclearNoNum(e);
}
// 触发v-model的更新
obj.dispatchEvent(new Event('input'));
}
const zblur = function(e) {
zclearNoNum(e);
setTimeout(() => {
const match = regex.exec(obj.value);
if (match) {
obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
zclearNoNum(e);
}
// 触发v-model的更新
obj.dispatchEvent(new Event('change'));
}, 50)
}
obj.onkeyup = zclearNoNum;
obj.onblur = zblur;
function onCompositionStart(e) {
e.target.composing = true
}
function onCompositionEnd(e) {
console.log('按回车将字输入', e.target.value)
e.target.composing = false
obj.dispatchEvent(new Event('change'));
setTimeout(() => {
if (obj.value) {
obj.value = obj.value.replace(/(\ud83c[\udc00-\udfff])|(\ud83d[\udc00-\udfff])|(\ud83e[\udc00-\udfff])|[\u2100-\u32ff]|[\u0030-\u007f][\u20d0-\u20ff]|[\u0080-\u00ff]/g, '');
zclearNoNum(e);
}
// 触发v-model的更新
obj.dispatchEvent(new Event('change'));
}, 50)
}
obj.addEventListener('compositionstart', onCompositionStart)
obj.addEventListener('compositionend', onCompositionEnd)
},
update(el, binding, vnode, oldVnode) {}
})
然后在input表情中加入自定义指令v-clear-emoij即可
<el-input v-model.trim="temp.name" v-clear-emoij :disabled="!formable" maxlength="30"/>
如此就实现了我想要的效果。但是这种改法可能只适合比较小的项目,如果项目比较大,每一个el-input标签加过去会死人的,所以请教了一下后端大佬,这个bug就被后端大佬要走了,,,,,,说是看看能不能直接改数据库的存储类型,,,,,,,不管咋样,,,这个方法还是要记载下来的
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)