el-input添加自定义指令只允许输入中文/英文/数字,兼容输入法事件

省流

script:

javascript 复制代码
directives: {
 regexp: {
   inserted: (el, binding, vnode) => {
     let composition = false
     const formatValue = function (e) {
       if (composition) return
       // vnode.componentInstance组件实例
       vnode.componentInstance.$emit('input', e.target.value.replace(/[^\u4e00-\u9fa5a-zA-Z0-9/]/g, ''))
     }
     el.oninput = formatValue
     // 请务必使用addEventListenner,不信邪你试试el.oncompositionstart
     el.addEventListener('compositionstart', () => { composition = true })
     el.addEventListener('compositionend', e => {
       composition = false
       formatValue(e)
     })
   }
 }
}

template:

html 复制代码
<el-input v-regexp />

有问题欢迎指出

相关推荐
广州华水科技7 小时前
北斗GNSS与单北斗变形监测在水库安全监测中的应用探索
前端
蜡台7 小时前
使用 html javascript 实现 金币落袋效果
前端·javascript·html
IT_陈寒7 小时前
为什么我的Python multiprocessing总是卡在join()?
前端·人工智能·后端
李白的天不白7 小时前
VUE依赖配置问题
前端·javascript·vue.js
m0_738120727 小时前
后渗透维权提权基础——CTF模拟红队进行权限维持(二)
前端·网络·windows·python·安全·php
AC赳赳老秦7 小时前
团队知识库搭建:用 OpenClaw 自动整理会议纪要、技术方案、故障复盘,同步到 Confluence / 语雀
开发语言·前端·python·github·visual studio·deepseek·openclaw
之歆7 小时前
Day05_CSS完整博客笔记(下)
前端·css·笔记
之歆7 小时前
Day05_CSS完整博客笔记(上)
前端·css·笔记
chenhua7 小时前
狗头管家终端工作台 - 让多终端管理变得优雅
前端·chrome·terminal·gemini·opencode·cluade
ZC跨境爬虫7 小时前
跟着 MDN 学 HTML day_7:(进阶文本语义标签全覆盖)
前端·javascript·css·ui·html