element-ui中input限制输入

最新推荐文章于 2024-09-14 17:43:40 发布

原创最新推荐文章于 2024-09-14 17:43:40 发布

· 744 阅读

6 ·

版权

文章标签：

#elementui

是否经常遇到输入框强制输入数字类型、数字类型或小数点类型，以及限制长度的问题？记录一下自己在项目中的解决办法…

限制输入数字类型

方式一

<el-input
   v-model.number="form.cableLength"
   type='number'
   :placeholder="光缆长度"
 ></el-input>             <!-- 只能输入数字类型， 但是 7.05这种是输入不进去的 -->

方式二

<el-input
   v-model="form.cableLength"
   oninput="value=value.replace(/[^\d]/g,'')"
   :placeholder="光缆长度"
 ></el-input>

限制输入数字类型或小数点的数字

<el-input
   v-model="form.cableLength"
   oninput="value=value.replace(/[^0-9.]/g,'')"
   :placeholder="光缆长度"
 ></el-input>             <!-- 只能输入数字和小数点， 7.05这种是输入不进去的 -->

限制输入长度

<el-input
	v-model="item.userScore"
    onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
	maxlength="4"
></el-input>       <!-- 强制输入数字, 并限制输入长度 -->