vue中输入框的限制，最多三位小数~~

最新推荐文章于 2023-06-20 16:33:44 发布

原创最新推荐文章于 2023-06-20 16:33:44 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个在HTML5中限制输入框只接受数字并限定最多三位小数的方法。通过使用`<el-input type=number>`元素配合`oninput`事件处理，结合JavaScript的字符串操作，如`indexOf()`和`slice()`，可以轻松实现这一功能。这种方法简单实用，适用于前端开发中对数字输入的精确控制。

开发中遇到一些输入框，输入框中需要输入数字，并且有一定的限制，比如最多三位小数啊，这类。
话不多说，直接安排

<el-input  type="number" oninput="value=value.indexOf('.')>-1 ? value.slice(0,value.indexOf('.') + 4) : value" ></el-input>

这样一个输入框，就限制了数字，并且最多三位小数啦，很简单~
稍微解释一下，首先要一个数字框，h5中type=‘number’,很好的限制了数字，然后三位小数呢，首先判断这个数字，是否有小数点，如果没有，那么直接显示即可，如果有，可以按照小数点进行切片，slice方法正好满足我们的需求，三位小数嘛，就+4，取不到后面的参数，很基础的方法，帮我们巩固一下~~~然后最基础的oninput事件别忘记哦~，跟着我一起进步吧。