HTML 如果达到最大限制则设置固定值

Question

我为同一问题搜索了很多，但我只能找到 'sort of solutions'，例如 max 和 maxlength，但这些对我不起作用。

HTML 我有：

<input type="text" id="current" name="current_xj" maxlength="9" placeholder="Enter your value">

我想将最大值设置为：200000000。我以为我可以使用 max="200000000" 但它对我不起作用。

<input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">

你仍然可以输入数字 250000000 或 999999999，我倾向于做一些实时计算。所以它不会验证数字是否高于 200000000。

我想做的是：
选项 1)
如果有人输入大于 200000000 的数字，则将输入值更改为 200000000。立即更改，因为没有可单击的按钮（如提交或计算或其他任何按钮）。

选项 2)
不允许输入任何大于 200000000 的数字。

我该怎么做？提前致谢！

Answer 1

试试下面的代码：

$(document).ready(function() {
  $("input").keyup(function() {
    //alert($(this).val());
    if ($(this).val() < 200000000) {

    } else {
      alert("Reached Maximun Limit of Input");
      $(this).val() = 200000000;
    }
  });
});

<head>
  <title>Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <h4>Validate text Box</h4>
  <input type="text" id="current" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">
</body>

Answer 2

这里有一些 JQuery 测试，您可以继续开发

$(document).ready(function() {


  $(".Int").keydown(function() {
    try {
      var value = parseFloat($(this).val());
      $(this).attr("Temp", value) // Save the current value
    } catch (err) {

    }

  }).keyup(function() {

    var value = parseFloat($(this).val());
    var temp = $(this).attr("Temp");
    var max = parseFloat($(this).attr("max"));
    // if the new value bigger then max, then load the prev value
    if (value > max)
      $(this).val(temp);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="current" class="Int" name="current_xj" maxlength="9" max="200000000" placeholder="Enter your value">

Answer 3

下面是当值变大时触发函数的代码

function func() {
  if (document.getElementById("current").value > 200000000) {
    //alert("reached max limit");
    document.getElementById("current").value = 200000000;
  }
}

<input type="text" id="current" name="current_xj" maxlength="9" onkeyup="func()" placeholder="Enter your value">

HTML 如果达到最大限制则设置固定值

HTML set fixed value if max limit is reached

html

limit