el-input仅限输入数字 (输入框仅支持输入数字)

需求:日常开发中会遇到输入框只能输入数字的功能。常用的方法有下面几种

  • 方式1 (将输入框类型改成number)
javascript 复制代码
<el-input v-model="number" type="number"/>
  • 方式2 (使用正则控制) 推荐使用该方式
javascript 复制代码
 <el-input v-model="value1" placeholder="请输入" @input.native="onInput"/>
 
const value1 = ref('')
// 定义输入处理函数
function onInput(event) {
  value1.value = event.replace(/[^\d.]/g, '');
  console.log(event, 'event', value1.value)
}
  • 方式3 (使用oninput来实现)
javascript 复制代码
<el-input v-model="amount" type="text" oninput="value=value.replace(/[^\d.]/g,'')"/>

比较推荐方式二 用正则的方式来做,方式三会有一个问题就是先输入汉字在输入数字,这个时候打印输入框绑定的值就会是空的,用方式二不会出现这个问题,方式一 加上number之后会出现上下箭头,需要用css隐藏过于麻烦而且可能会影响其他样式(不推荐)

相关推荐
review445435 小时前
拿到 codex 第一步
前端·agent·vibecoding
鶴哥只手遮天5 小时前
jQuery 4.0 源码架构与工程实践-第 01 章 · 全景与工程结构:一个 20 岁库的自省
前端·javascript·jquery
徐小夕5 小时前
doc2docx方案,开源!
前端·vue.js·github
徐小夕5 小时前
JitOFD:一款面向信创与档案场景的 Web 端 OFD 编辑器
前端·vue.js·github
孟健6 小时前
Kimi K3.1 Pro 编程实测:3个月27万行代码,每年1.7万预算下如何9分钟修好顽固Bug
前端·开源·ai编程
inksci6 小时前
在线编辑表格,功能强大,json互转
前端·javascript·html
咩咩啃树皮6 小时前
JavaScript 中 this 指向为什么总在变?
开发语言·前端·javascript
彭亚川Allen7 小时前
从零手搓 RAG 之 Embedding 技术
前端·后端·面试
OpenTiny社区7 小时前
GenUI SDK v1.4.0 的 React 渲染器到底做对了什么?
前端·github·ai编程
星光开发者7 小时前
基于springboot智慧草场牛羊管理系统-计算机毕设【课程设计】50360
vue.js·spring boot·后端·mysql·php·课程设计·express