如何使文本框仅接受 0-10 中的数字和小数部分中的仅 0.5?

知乎

我有一个文本框,用户只能在其中输入 0-10 和允许的小数部分为 0.5,因此可以输入 0 或 0.5 或 1.5 或 4 等等。在这里我可以添加所有数字:

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 10) input.value = 10;
  }
</script>
<input type="text" onchange="handleChange(this);" />

我需要提醒错误输入并重置该文本框。

阿姆鲁斯·皮莱

扩展@Vishnu Badhoriya 的评论,我们也可以这样做:

HTML

<input id="number" type="number" min="0" max="10" step="0.5" onchange="roundHalf(this.value)">

JS (jQuery)

function roundHalf(num) {
  if (num > 10) {
    $('#number').val(10);
  } else if (num < 0) {
    $('#number').val(0);
  } else {
    $('#number').val(Math.round(num*2)/2);
  }
}

您也可以采用非 jQuery 方法,但我之所以选择这样做是因为易于演示。这将确保用户将无法输入他自己的值。

在此处查看 CodePen 以查看其实际效果:https ://codepen.io/anon/pen/RBoJGB

编辑:忘记实现另一个约束,对于 0 <= num <= 10。将其添加到代码片段中。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

文本框PreviewTextInput-仅接受数字和':'

来自分类Dev

只允许以5和0结尾的数字

来自分类Dev

在HTML 5中接受大于0的数字的正确验证模式是什么?

来自分类Dev

如何限制文本框仅使用javascript接受10个字母字符?

来自分类Dev

从仅包含0或仅包含0的数据框中删除行

来自分类Dev

如何在Java中编写仅允许数字0-9和#的正则表达式

来自分类Dev

数字以0或5结尾吗?

来自分类Dev

如何允许文本框仅接受PHP中的日语字符,数字和单词?

来自分类Dev

如何使文本框仅接受货币格式输入?

来自分类Dev

Nodejs仅向数据库发送猫鼬:details.insertOne({_id:ObjectId(“ 5e5261c523d3fd10c0bfe4d5”),__ v:0},{session:null})发送到数据库

来自分类Dev

如何允许文本框在其最大长度为6的输入中接受0-6和X的模式?

来自分类Dev

在输入字段中仅接受0和1

来自分类Dev

在vue.js中仅接受数字的文本框?

来自分类Dev

长度为0时如何防止用户在文本框中输入特殊字符?

来自分类Dev

只允许以5和0结尾的数字

来自分类Dev

文本框仅接受C#中的数字

来自分类Dev

在HTML 5中接受大于0的数字的正确验证模式是什么?

来自分类Dev

无法在html文本框中显示0值

来自分类Dev

需要两个不同的文本框,以仅允许数字0-9和1小数位

来自分类Dev

用数字0-10 +小数在jquery中设置圆角进度条动画

来自分类Dev

如何在ASP.net文本框中将条目限制为仅0-9,空格和逗号

来自分类Dev

如何仅将0和1放入Windows Phone的文本框中

来自分类Dev

如何使Silverlight中的XAML文本框仅接受最大小数点后一位精度的数字

来自分类Dev

$ {0 ## * /}和$ {0%/ *}如何工作?

来自分类Dev

在Racket的GUI库中仅接受数字的文本框

来自分类Dev

如何确保用户仅输入0到10之间的数字?

来自分类Dev

从变量中仅获取数字0-9和+的最佳方法

来自分类Dev

如何限制输入文本框只允许 0 和 1

来自分类Dev

在Gnuplot中,除了使用像0x10^0这样的服装格式之外,如何设置原点仍然使用0?

Related 相关文章

  1. 1

    文本框PreviewTextInput-仅接受数字和':'

  2. 2

    只允许以5和0结尾的数字

  3. 3

    在HTML 5中接受大于0的数字的正确验证模式是什么?

  4. 4

    如何限制文本框仅使用javascript接受10个字母字符?

  5. 5

    从仅包含0或仅包含0的数据框中删除行

  6. 6

    如何在Java中编写仅允许数字0-9和#的正则表达式

  7. 7

    数字以0或5结尾吗?

  8. 8

    如何允许文本框仅接受PHP中的日语字符,数字和单词?

  9. 9

    如何使文本框仅接受货币格式输入?

  10. 10

    Nodejs仅向数据库发送猫鼬:details.insertOne({_id:ObjectId(“ 5e5261c523d3fd10c0bfe4d5”),__ v:0},{session:null})发送到数据库

  11. 11

    如何允许文本框在其最大长度为6的输入中接受0-6和X的模式?

  12. 12

    在输入字段中仅接受0和1

  13. 13

    在vue.js中仅接受数字的文本框?

  14. 14

    长度为0时如何防止用户在文本框中输入特殊字符?

  15. 15

    只允许以5和0结尾的数字

  16. 16

    文本框仅接受C#中的数字

  17. 17

    在HTML 5中接受大于0的数字的正确验证模式是什么?

  18. 18

    无法在html文本框中显示0值

  19. 19

    需要两个不同的文本框,以仅允许数字0-9和1小数位

  20. 20

    用数字0-10 +小数在jquery中设置圆角进度条动画

  21. 21

    如何在ASP.net文本框中将条目限制为仅0-9,空格和逗号

  22. 22

    如何仅将0和1放入Windows Phone的文本框中

  23. 23

    如何使Silverlight中的XAML文本框仅接受最大小数点后一位精度的数字

  24. 24

    $ {0 ## * /}和$ {0%/ *}如何工作?

  25. 25

    在Racket的GUI库中仅接受数字的文本框

  26. 26

    如何确保用户仅输入0到10之间的数字?

  27. 27

    从变量中仅获取数字0-9和+的最佳方法

  28. 28

    如何限制输入文本框只允许 0 和 1

  29. 29

    在Gnuplot中,除了使用像0x10^0这样的服装格式之外,如何设置原点仍然使用0?

热门标签

归档