使用javascript的HTML字段最小值答案

【问题标题】：HTML field minimum valuse using java script使用javascript的HTML字段最小值
【发布时间】：2021-08-16 20:41:02
【问题描述】：

我有一个表单，它有两个字段stationerytype 和stationeryrqstqty。表单的stationeryrqstqtyfield 接受数字。可以在此字段中输入的最小数量（数量）取决于stationerytype 字段的值，即如果stationerytype 字段值为“铅笔”，则stationeryrqstqty 字段的最小值属性应为 5 和如果它是“记事本”，那么stationeryrqstqty 字段的最小属性应该是 10。我正在按照给定的代码执行此操作，但它不起作用。它总是给出 1,2,3.......

<td>
   <input  type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off"  required>
</td>
<td>
   <input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required >
</td>
<script>
    var options = document.querySelectorAll(".option1");
    options.forEach(function(option) {
      option.addEventListener("change", function() {
        calculatingMinimunQuantity(option);
      });
    });
    
    function calculatingMinimunQuantity(option) {
      var minimum = 0;
      var value = option.value;
      if (value === "PENCIL") {
        minimum = "5";
        step1="5";
      } else if (value === "NOTEPAD") {
        minimum = "10";
        step1="10";
      }
      //   getting the quantity input field
      option.nextElementSibling.setAttribute("min", minimum);
       option.nextElementSibling.setAttribute("step", step1);
    }
</script>

【问题讨论】：

您的 option1 输入字段没有 nextSibling。它是<td> 中的唯一元素
@dehart 在他的例子中，两个<td> 元素在表格之外，甚至在tr 元素之外，这使得它们毫无用处，现代浏览器不会渲染它们，只会渲染内容内联为兄弟姐妹。我并不是说这是对的，但至少这不是他问题的原因。
我假设 OP 只粘贴了相关部分，因为名称字段以“[]”结尾并且change 事件被添加到一个循环中。

标签： javascript php html css

【解决方案1】：

您可以通过使用keyup 事件而不是change 事件来解决此问题：

  var options = document.querySelectorAll(".option1");
    options.forEach(function(option) {
      option.addEventListener("keyup", function() {
        calculatingMinimunQuantity(option);
      });
      option.nextElementSibling.addEventListener('change', evt => {
        if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
      });
    });
    
    function calculatingMinimunQuantity(option) {
      var minimum = 0, step1 = 0;
      var value = option.value;
      if (value === "PENCIL") {
        minimum = "5";
        step1="5";
      } else if (value === "NOTEPAD") {
        minimum = "10";
        step1="10";
      }
      //   getting the quantity input field
      option.nextElementSibling.setAttribute("min", minimum);
      option.nextElementSibling.setAttribute("step", step1);
      
}

注意：事件监听器用于确保用户输入的值不会小于最小值

【讨论】：