＜Input type=“number“ 框内只能输入整数。

轮回白夜

于 2021-08-13 17:18:10 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 vue

本文链接：https://blog.youkuaiyun.com/StudentStudy555/article/details/119679816

本文分享了一个有效的HTML Input解决方案，确保用户只能输入整数，无法输入小数点。通过onKeypress和onkeyup事件配合正则表达式实现输入控制，同时考虑了粘贴操作的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Input type=“number” 框内只能输入整数且不能输入小数点

之前在网上找了好多都是不能使用的，解决问题后发一下我解决的方法。

代码

 <Input type="number" 
 		onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"//这个是关于不能输入小数点的控制
        οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
        onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'0')}else{this.value=this.value.replace(/\D/g,'')}" />