如何在 JavaScript 中将用户输入限制为 0 到 99答案

【问题标题】：How to restrict user input from 0 to 99 in JavaScript如何在 JavaScript 中将用户输入限制为 0 到 99
【发布时间】：2021-08-10 01:38:06
【问题描述】：

我想实现用户输入限制，我真的很努力但没有找到任何解决方案来解决这个问题。有人可以帮我如何限制用户输入 0 到 99 之间的值

谢谢

<input type="number" placeholder="Enter value" onChange={(e)=>this.handleValue(e.target.value)}/>

handleValue = value=> {
   Math.min(100, Math.max(99, value))
}

【问题讨论】：

Math.min / Math.max 只返回参数的最小/最大值。

标签： javascript html reactjs ecmascript-6

【解决方案1】：

HTML5 救援：

<input type="number" min="0" max="99">

元素自动使任何条目无效这不是数字（或为空，除非指定需要）。

您可以使用 required 属性使空条目无效。（其他词，必须填写输入。）

可以使用 step 属性将有效值限制为一组特定的步骤（例如，倍数 10)。

您可以使用 min 和 max 属性来约束有效值的上限和下限。

MDN

<form>
  <div>
    <label for="myNumber">Pick a number between 0 and 99:</label>
    <input id="myNumber" type="number" name="myNumber" min="0" max="99" required>
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit">
  </div>
</form>

【讨论】：

这不会阻止用户输入超出范围的数字，也不会阻止他们在没有 some javascript 的情况下提交表单。一个完整的答案可能应该演示或至少指向Constraint Validation API。
@Emissary an invalid input will not allow the form to be submitted。输入一个超出范围的数字，看看提交是否有效。（添加 JS 只是为了阻止表单消失）。
@VLAZ 哦，我的错！谢谢指正。

【解决方案2】：

如果希望阻止高于或低于的输入，则需要阻止事件触发。

const handleValue = (event) => {
  const value = event.target.value;
  if (value > 99 || value < 0) {
    event.preventDefault();
    return;
  }
}

<input type="number" placeholder="Enter value" onChange={handleValue}/>

【讨论】：