说明 关于@input.native,由于elementui中对html的属性做了封装,所以使用html的原生属性需要添加“.native” @input.native=“formatNumber(‘keyword’)” // 正常英文输入法情况下输入框输入内容变化时对输入数据的处理 @compositionend.native=“formatNumber(‘keyword’)” // 中文输入法下输入内容变化时对输入数据的处理 formatNumber方法中,不通过this.value来直接修改输入的值,而是通过修改v-model绑定的变量来修改,这样在设置了maxlength限制的情况下,内容长度的统计才能正常(网上常见的 οninput=“value=value.replace(/[^\d]/g, ‘’)”,这种校验在限制了长度时,中文输入法下的替换会导致长度统计异常而无法输入的问题)
<el-input v-model="params.keyword" @input.native="formatNumber('keyword')" @compositionend.native="formatNumber('keyword')" maxlength="16" ></el-input>
formatNumber(field) { this.params[field] = this.params[field].toString().replace(/[^\d]/g, ""); }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定小文本
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:使段落突出显示
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:列表
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:引用(Blockquote)
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:地址(Address)
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:缩写
2019-05-18 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:强调