开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >input number 数字输入限制，最大值最小值输入范围限制

input number 数字输入限制，最大值最小值输入范围限制

acoolgiser

发布于 2022-03-07 09:06:47

发布于 2022-03-07 09:06:47

18.2K00

代码可运行

举报

文章被收录于专栏：acoolgiser_zhuanlanacoolgiser_zhuanlan

运行总次数：0

代码可运行

方式一：max="100" min="10" 这种方式限制的是数字输入框右边的增减箭头按钮，最大值和最小值，不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数，还是无法限制。

<input type="number" max="100" min="10" value="">

方式二：oninput // 只限制长度：输入四位数的数字

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

// 只限制最大值100：最大为100，即使手动输入大于100的数也会自动变成100

<input type="number" oninput="if(value>100)value=100" />

// 只限制最小值0：最小为0，即使手动输入小于0的负数也会自动变成0

<input type="number" oninput="if(value<0)value=0" />

// 均作限制：长度4 最大值100 最小值0

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

目录

方式一：max="100" min="10" 这种方式限制的是数字输入框右边的增减箭头按钮，最大值和最小值，不能对手动输入的数进行限制。如果手动输入一个大于100或小于10的数，还是无法限制。

方式二：oninput // 只限制长度：输入四位数的数字

// 只限制最大值100：最大为100，即使手动输入大于100的数也会自动变成100

// 只限制最小值0：最小为0，即使手动输入小于0的负数也会自动变成0

// 均作限制：长度4 最大值100 最小值0