如何使文本框只接受 0-10 的数字，并且只接受小数部分的 0.5？答案

【问题标题】：How to make a textbox only accept numbers from 0-10 and only .5 from decimal part?如何使文本框只接受 0-10 的数字，并且只接受小数部分的 0.5？
【发布时间】：2018-12-28 08:20:03
【问题描述】：

我有一个文本框，用户只能在其中输入 0-10 并且允许的小数部分是 0.5 所以一个人可以输入 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);" />

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

【问题讨论】：

你也可以在html5中做到这一点
另一种选择是只拥有一个匹配 0 到 10 的 pattern 属性，不需要 Javascript，尽管这无法重置框，只能告诉用户输入是无效
@VishnuBhadoriya 如何防止用户输入值
@qww 比如你想防止输入什么样的值
@VishnuBhadoriya 除了允许的任何东西......这样我就可以将数字类型替换为文本并使用步骤 0.5 防止从 0 到 10

标签： javascript html input html-input

【解决方案1】：

扩展@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

【讨论】：

但我需要阻止所有高于 10 和低于 0 的值
是的，上面的 min 和 max 属性将阻止开始输入 10
好的，我相信他希望手动输入更高的数字也受到限制。我确实忘记了那个约束。那应该很简单。您只需在 roundHalf() 函数中添加您在问题中实现的 if 条件，如果值大于 10，则将输入的值更改为 10。