Vue 3 TS 实战手写v-emoji自定义指令彻底禁止输入框表情符号导读在开发用户昵称、评论或表单系统时我们经常遇到一个痛点“如何禁止用户在输入框中输入 Emoji 表情”虽然可以通过后端校验拦截但糟糕的用户体验提交后才报错会让用户抓狂。最好的方案是在前端输入时直接拦截。本文将带你使用Vue 3 TypeScript手写一个高性能的自定义指令v-emoji或更准确地说是v-no-emoji从正则原理、指令生命周期到边界情况处理全方位实现“表情防火墙”。代码可直接复制生产环境使用项目源码gitee源码地址一、为什么需要禁止 Emoji在很多业务场景中Emoji 是“不受欢迎”的数据库兼容性老旧的 MySQL (utf8) 不支持 4 字节的 Emoji存入会报错需utf8mb4。UI 布局崩坏某些特殊 Emoji 宽度异常导致移动端布局错位。搜索与过滤Emoji 会导致搜索引擎分词失败或引发敏感词过滤误判。业务规范如实名认证姓名、企业发票抬头等严肃场景严禁出现表情。解决方案利用 Vue 的自定义指令 (Custom Directives)在input事件触发时实时清洗数据让用户“根本输不进去”。二、核心原理如何识别 EmojiEmoji 的 Unicode 编码范围比较复杂主要集中在以下区间\u{1F600}-\u{1F64F}(Emoticons)\u{1F300}-\u{1F5FF}(Misc Symbols and Pictographs)\u{1F680}-\u{1F6FF}(Transport and Map)\u{1F1E0}-\u{1F1FF}(Flags)以及肤色修饰符、零宽连接符等。最稳健的正则表达式constemojiRegex/[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/gu;注意必须加上u(unicode) 和g(global) 标志才能正确匹配代理对Surrogate Pairs。三、实战代码实现v-no-emoji指令我们将创建一个名为noEmoji.ts的文件。为了语义清晰我们将其命名为v-no-emoji禁止表情当然你也可以 alias 为v-emoji表示“开启表情过滤模式”。3.1 定义指令 (directives/noEmoji.ts)importtype{ObjectDirective}fromvue;/** * 匹配 Emoji 的正则表达式 * \p{Extended_Pictographic}: 匹配所有扩展图形字符包括大部分 Emoji * \u{1F3FB}-\u{1F3FF}: 肤色修饰符 * \u{1F9B0}-\u{1F9B3}: 头发/肢体修饰符 * u 标志: 启用 Unicode 模式 * g 标志: 全局匹配 */constEMOJI_REGEX/[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/gu;interfaceNoEmojiElementextendsHTMLInputElement{_prevValue?:string;// 用于记录上一次合法的值以便回滚}exportconstnoEmoji:ObjectDirectiveNoEmojiElement{mounted(el,binding){// 如果传入参数为 false则不启用过滤动态控制if(binding.valuefalse)return;// 记录初始值防止初始化时就有表情cleanInput(el);el.addEventListener(input,handleInput);},updated(el,binding){// 支持动态开启/关闭if(binding.valuefalse){el.removeEventListener(input,handleInput);}else{el.addEventListener(input,handleInput);cleanInput(el);// 更新时再次检查}},unmounted(el){el.removeEventListener(input,handleInput);}};/** * 处理输入事件 */functionhandleInput(this:NoEmojiElement,event:Event){consttargetevent.targetasNoEmojiElement;constoriginalValuetarget.value;// 如果包含 Emojiif(EMOJI_REGEX.test(originalValue)){// 1. 移除所有 EmojiconstcleanedValueoriginalValue.replace(EMOJI_REGEX,);// 2. 更新 DOM 值target.valuecleanedValue;// 3. 重要手动触发 input 事件确保 Vue 的 v-model 能同步到最新值// 因为直接修改 target.value 不会自动触发 Vue 的响应式更新target.dispatchEvent(newEvent(input,{bubbles:true}));// 4. (可选) 恢复光标位置防止输入时光标跳到末尾// 简单策略如果用户是在中间插入表情移除后光标可能会乱这里做一个简单的补偿// 复杂场景建议使用 selectionStart/selectionEnd 精细计算constdifforiginalValue.length-cleanedValue.length;if(diff0target.selectionStart!null){target.setSelectionRange(Math.max(0,target.selectionStart-diff),Math.max(0,target.selectionEnd-diff));}}}/** * 初始化或强制清洗 */functioncleanInput(el:NoEmojiElement){if(EMOJI_REGEX.test(el.value)){el.valueel.value.replace(EMOJI_REGEX,);el.dispatchEvent(newEvent(input,{bubbles:true}));}}3.2 全局注册 (main.ts)为了让它在整个项目中可用我们在入口文件注册它。import{createApp}fromvue;importAppfrom./App.vue;import{noEmoji}from./directives/noEmoji;constappcreateApp(App);// 注册为 v-no-emojiapp.directive(no-emoji,noEmoji);// 如果你非要叫 v-emoji (语义上是开启表情过滤)也可以这样// app.directive(emoji, noEmoji);app.mount(#app);四、在组件中使用现在你可以在任何input或textarea上使用该指令。示例用户昵称设置template div classform-item label昵称 (禁止输入表情):/label !-- 基础用法 -- input v-modelnickname v-no-emoji typetext placeholder请输入您的昵称 classinput-box / !-- 动态控制根据开关决定是否过滤 -- div stylemargin-top: 20px; label input typecheckbox v-modelenableFilter / 开启表情过滤 /label input v-modelcomment v-no-emojienableFilter typetext placeholder测试动态开关 classinput-box / /div p classpreview当前值: {{ nickname }}/p /div /template script setup langts import { ref } from vue; const nickname ref(HelloVue3); const comment ref(); const enableFilter ref(true); /script style scoped .input-box { border: 1px solid #ccc; padding: 8px; border-radius: 4px; width: 300px; font-size: 16px; } .preview { margin-top: 10px; color: #666; font-size: 14px; } /style五、关键技术点解析 (避坑指南)1. 为什么要手动dispatchEvent在input事件回调中如果我们直接修改el.value浏览器不会再次触发input事件。而 Vue 的v-model是依赖input事件来更新数据的。后果界面上看表情被删了但 Vue 的数据模型里还留着表情。解决修改值后手动target.dispatchEvent(new Event(input))通知 Vue 更新状态。2. 光标位置错乱问题当用户在字符串中间插入一个 Emoji例如ABC[表情]DEF直接替换会导致字符串变短光标通常会跳到末尾。优化代码中通过计算diff(删除了多少个字符)反向调整selectionStart和selectionEnd尽量保持光标在用户预期的位置。3. 正则的兼容性使用了\p{...}语法这需要环境支持ES2018。现代浏览器Chrome 64, Firefox 78, Safari 11.1 均完美支持。老旧浏览器如果需要兼容 IE 或极老版本需要引入regexpu-core进行转译或者使用冗长的十六进制范围写法。但在 2026 年的今天直接使用 Unicode 属性转义是最佳实践。4. 指令参数 vs 绑定值代码中利用了binding.value。input v-no-emoji默认true开启过滤。input v-no-emojifalse关闭过滤。这为业务提供了极大的灵活性例如普通用户禁止VIP 用户允许。六、进阶封装成 NPM 包思路如果你想在多个项目中复用可以将其封装// types/index.d.tsimporttype{App}fromvue;declareconstEmojiPlugin:{install(app:App,options?:{directiveName?:string}):void;};exportdefaultEmojiPlugin;// plugin/index.tsimport{noEmoji}from./noEmoji;importtype{App}fromvue;exportdefault{install(app:App,options:{directiveName?:string}{}){constnameoptions.directiveName||no-emoji;app.directive(name,noEmoji);}};七、总结通过 Vue 3 的自定义指令我们实现了一个无侵入、高性能、类型安全的 Emoji 过滤器。✅用户体验好输入时即时拦截无需提交报错。✅代码解耦逻辑封装在指令中组件代码清爽。✅TypeScript 友好完整的类型提示。✅灵活可控支持动态开关。在涉及用户生成内容 (UGC) 的系统中这样的防御性编程是必不可少的。赶紧把这个指令加入你的工具库吧互动话题你在项目中遇到过哪些奇葩的 Emoji 引发的 Bug是数据库报错还是 UI 炸裂欢迎在评论区分享你的“血泪史”觉得有用请点赞❤️收藏⭐关注我获取更多 Vue 3 TS 高级实战技巧
Vue 3 + TS 实战：手写 v-no-emoji 自定义指令，彻底禁止输入框表情符号！
发布时间：2026/7/30 11:29:52
Vue 3 TS 实战手写v-emoji自定义指令彻底禁止输入框表情符号导读在开发用户昵称、评论或表单系统时我们经常遇到一个痛点“如何禁止用户在输入框中输入 Emoji 表情”虽然可以通过后端校验拦截但糟糕的用户体验提交后才报错会让用户抓狂。最好的方案是在前端输入时直接拦截。本文将带你使用Vue 3 TypeScript手写一个高性能的自定义指令v-emoji或更准确地说是v-no-emoji从正则原理、指令生命周期到边界情况处理全方位实现“表情防火墙”。代码可直接复制生产环境使用项目源码gitee源码地址一、为什么需要禁止 Emoji在很多业务场景中Emoji 是“不受欢迎”的数据库兼容性老旧的 MySQL (utf8) 不支持 4 字节的 Emoji存入会报错需utf8mb4。UI 布局崩坏某些特殊 Emoji 宽度异常导致移动端布局错位。搜索与过滤Emoji 会导致搜索引擎分词失败或引发敏感词过滤误判。业务规范如实名认证姓名、企业发票抬头等严肃场景严禁出现表情。解决方案利用 Vue 的自定义指令 (Custom Directives)在input事件触发时实时清洗数据让用户“根本输不进去”。二、核心原理如何识别 EmojiEmoji 的 Unicode 编码范围比较复杂主要集中在以下区间\u{1F600}-\u{1F64F}(Emoticons)\u{1F300}-\u{1F5FF}(Misc Symbols and Pictographs)\u{1F680}-\u{1F6FF}(Transport and Map)\u{1F1E0}-\u{1F1FF}(Flags)以及肤色修饰符、零宽连接符等。最稳健的正则表达式constemojiRegex/[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/gu;注意必须加上u(unicode) 和g(global) 标志才能正确匹配代理对Surrogate Pairs。三、实战代码实现v-no-emoji指令我们将创建一个名为noEmoji.ts的文件。为了语义清晰我们将其命名为v-no-emoji禁止表情当然你也可以 alias 为v-emoji表示“开启表情过滤模式”。3.1 定义指令 (directives/noEmoji.ts)importtype{ObjectDirective}fromvue;/** * 匹配 Emoji 的正则表达式 * \p{Extended_Pictographic}: 匹配所有扩展图形字符包括大部分 Emoji * \u{1F3FB}-\u{1F3FF}: 肤色修饰符 * \u{1F9B0}-\u{1F9B3}: 头发/肢体修饰符 * u 标志: 启用 Unicode 模式 * g 标志: 全局匹配 */constEMOJI_REGEX/[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/gu;interfaceNoEmojiElementextendsHTMLInputElement{_prevValue?:string;// 用于记录上一次合法的值以便回滚}exportconstnoEmoji:ObjectDirectiveNoEmojiElement{mounted(el,binding){// 如果传入参数为 false则不启用过滤动态控制if(binding.valuefalse)return;// 记录初始值防止初始化时就有表情cleanInput(el);el.addEventListener(input,handleInput);},updated(el,binding){// 支持动态开启/关闭if(binding.valuefalse){el.removeEventListener(input,handleInput);}else{el.addEventListener(input,handleInput);cleanInput(el);// 更新时再次检查}},unmounted(el){el.removeEventListener(input,handleInput);}};/** * 处理输入事件 */functionhandleInput(this:NoEmojiElement,event:Event){consttargetevent.targetasNoEmojiElement;constoriginalValuetarget.value;// 如果包含 Emojiif(EMOJI_REGEX.test(originalValue)){// 1. 移除所有 EmojiconstcleanedValueoriginalValue.replace(EMOJI_REGEX,);// 2. 更新 DOM 值target.valuecleanedValue;// 3. 重要手动触发 input 事件确保 Vue 的 v-model 能同步到最新值// 因为直接修改 target.value 不会自动触发 Vue 的响应式更新target.dispatchEvent(newEvent(input,{bubbles:true}));// 4. (可选) 恢复光标位置防止输入时光标跳到末尾// 简单策略如果用户是在中间插入表情移除后光标可能会乱这里做一个简单的补偿// 复杂场景建议使用 selectionStart/selectionEnd 精细计算constdifforiginalValue.length-cleanedValue.length;if(diff0target.selectionStart!null){target.setSelectionRange(Math.max(0,target.selectionStart-diff),Math.max(0,target.selectionEnd-diff));}}}/** * 初始化或强制清洗 */functioncleanInput(el:NoEmojiElement){if(EMOJI_REGEX.test(el.value)){el.valueel.value.replace(EMOJI_REGEX,);el.dispatchEvent(newEvent(input,{bubbles:true}));}}3.2 全局注册 (main.ts)为了让它在整个项目中可用我们在入口文件注册它。import{createApp}fromvue;importAppfrom./App.vue;import{noEmoji}from./directives/noEmoji;constappcreateApp(App);// 注册为 v-no-emojiapp.directive(no-emoji,noEmoji);// 如果你非要叫 v-emoji (语义上是开启表情过滤)也可以这样// app.directive(emoji, noEmoji);app.mount(#app);四、在组件中使用现在你可以在任何input或textarea上使用该指令。示例用户昵称设置template div classform-item label昵称 (禁止输入表情):/label !-- 基础用法 -- input v-modelnickname v-no-emoji typetext placeholder请输入您的昵称 classinput-box / !-- 动态控制根据开关决定是否过滤 -- div stylemargin-top: 20px; label input typecheckbox v-modelenableFilter / 开启表情过滤 /label input v-modelcomment v-no-emojienableFilter typetext placeholder测试动态开关 classinput-box / /div p classpreview当前值: {{ nickname }}/p /div /template script setup langts import { ref } from vue; const nickname ref(HelloVue3); const comment ref(); const enableFilter ref(true); /script style scoped .input-box { border: 1px solid #ccc; padding: 8px; border-radius: 4px; width: 300px; font-size: 16px; } .preview { margin-top: 10px; color: #666; font-size: 14px; } /style五、关键技术点解析 (避坑指南)1. 为什么要手动dispatchEvent在input事件回调中如果我们直接修改el.value浏览器不会再次触发input事件。而 Vue 的v-model是依赖input事件来更新数据的。后果界面上看表情被删了但 Vue 的数据模型里还留着表情。解决修改值后手动target.dispatchEvent(new Event(input))通知 Vue 更新状态。2. 光标位置错乱问题当用户在字符串中间插入一个 Emoji例如ABC[表情]DEF直接替换会导致字符串变短光标通常会跳到末尾。优化代码中通过计算diff(删除了多少个字符)反向调整selectionStart和selectionEnd尽量保持光标在用户预期的位置。3. 正则的兼容性使用了\p{...}语法这需要环境支持ES2018。现代浏览器Chrome 64, Firefox 78, Safari 11.1 均完美支持。老旧浏览器如果需要兼容 IE 或极老版本需要引入regexpu-core进行转译或者使用冗长的十六进制范围写法。但在 2026 年的今天直接使用 Unicode 属性转义是最佳实践。4. 指令参数 vs 绑定值代码中利用了binding.value。input v-no-emoji默认true开启过滤。input v-no-emojifalse关闭过滤。这为业务提供了极大的灵活性例如普通用户禁止VIP 用户允许。六、进阶封装成 NPM 包思路如果你想在多个项目中复用可以将其封装// types/index.d.tsimporttype{App}fromvue;declareconstEmojiPlugin:{install(app:App,options?:{directiveName?:string}):void;};exportdefaultEmojiPlugin;// plugin/index.tsimport{noEmoji}from./noEmoji;importtype{App}fromvue;exportdefault{install(app:App,options:{directiveName?:string}{}){constnameoptions.directiveName||no-emoji;app.directive(name,noEmoji);}};七、总结通过 Vue 3 的自定义指令我们实现了一个无侵入、高性能、类型安全的 Emoji 过滤器。✅用户体验好输入时即时拦截无需提交报错。✅代码解耦逻辑封装在指令中组件代码清爽。✅TypeScript 友好完整的类型提示。✅灵活可控支持动态开关。在涉及用户生成内容 (UGC) 的系统中这样的防御性编程是必不可少的。赶紧把这个指令加入你的工具库吧互动话题你在项目中遇到过哪些奇葩的 Emoji 引发的 Bug是数据库报错还是 UI 炸裂欢迎在评论区分享你的“血泪史”觉得有用请点赞❤️收藏⭐关注我获取更多 Vue 3 TS 高级实战技巧
