如何为只读元素设置最大值？答案

【问题标题】：How to have a max for a readonly element?如何为只读元素设置最大值？
【发布时间】：2021-12-05 14:35:12
【问题描述】：

假设我有一些看起来像这样的代码，并且我希望仅当 x 和 y 的总和为 10 或更少时才提交表单。现在，当我运行此代码时，它完全忽略了“最大值”，只是提交了表单。一旦我删除“只读”，它就会查看“最大值”。有没有办法为只读元素设置最大值？如果有，怎么做？

<!DOCTYPE html>
<html>
<head>
  <title>Max for readonly</title>
</head>
<body>
  <script>
    var x = 5;
    var y = 7;
    var sum = x + y;
    document.getElementById('demo').value = sum;
  </script>

  <form>
    <input id="demo" type="number" max="10" readonly>
    <input type="submit">
  </form>
</body>
</html>

提前致谢

【问题讨论】：

this 有帮助吗？

标签： javascript html max readonly

【解决方案1】：

你不能这样做：document.getElementById('demo').value = sum; 如果当前输入 id = 'demo' 是只读的。在您的情况下，您没有进行分配，因为元素是只读的。这就是为什么最大检查对您不起作用的原因。因为那里没有价值。您可以求和，并且只能设置您的输入 readonly = true;

<!DOCTYPE html>
<html>
<head>
  <title>Max for readonly</title>
</head>
<body>
  <script>
    var x = 5;
    var y = 7;
    var sum = x + y;
    document.getElementById('demo').value = sum;
    document.getElementById('demo').readOnly = true;
  </script>

  <form>
    <input id="demo" type="number" max="10">
    <input type="submit">
  </form>
</body>
</html>

<!DOCTYPE html>
<html>

<head>
  <title>Max for readonly</title>
</head>

<body>
  <form>
    <input id="demo" type="number" max="10">
    <input type="submit">
  </form>
  <script>
    var x = 5;
    var y = 7;
    var sum = x + y;
    document.getElementById('demo').value = sum;
    document.getElementById('demo').readOnly = true;
  </script>
</body>

</html>

【讨论】：

这似乎不起作用。表单仍然提交并且不应该提交。不显示 HTML5 验证消息。请参阅我添加到您的答案中的 sn-p。