input number 纯数字输入限制长度限制最大值

清木Moyu

于 2022-07-15 10:29:18 发布

阅读量1.5k

点赞数

文章标签： java servlet 前端

本文链接：https://blog.youkuaiyun.com/sun124608666/article/details/125799204

版权

这篇博客介绍了如何使用JavaScript的oninput事件来实时限制HTML输入框中数字的最大值、最小值以及字符串的长度。通过简单的示例代码，展示了如何在用户输入时即时校验并约束输入值，确保其不超过设定的限制，从而提供更友好的用户交互体验。

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

使用js的oninput即可简单实现，不需要些复杂的代码

// 限制最大值10
<input type="number" oninput="if(value>10)value=10" />
 
// 限制最小值0
<input type="number" oninput="if(value<0)value=0" />

// 限制输入长度，适用于字符串

<input type="number" oninput="if(value.length>40)value=value.slice(0,40)" />

//长度7  最大值40 最小值0
<input type="number" oninput="if(value>40)value=40;if(value.length>7)value=value.slice(0,7);if(value<0)value=0" />