从另一个输入框的值动态设置一个输入框的max属性 html答案

【问题标题】：Set the max attribute of a input box from the value of another one dynamically html从另一个输入框的值动态设置一个输入框的max属性 html
【发布时间】：2016-10-06 02:31:19
【问题描述】：

我正在尝试将此输入框的最大数量设置为另一个输入框，但我错过了如何连接它们两个的一些内容。这是我希望最大值根据另一个输入的当前值改变的那个

<input id="movement-quantity" class="movement-quantity" type="number" step="1" min="0" max = "1" pattern="\d*" required>

这是我想从中获取值的输入，这个值会自动改变其他代码，所以我正在尝试听这个

<input id="store-from-current-quantity" class="store-from-current-quantity" type="text" disabled>

这是我目前正在使用的功能

    function getMaxValueForRequest()
{
    var requester = document.getElementById("movement-quantity");
    var currentItemAmount = parseInt(document.getElementById("store-from-current-quantity").value);
    requester.max = currentItemAmount;
}

这是上面函数所在的脚本文件的开头

//variables
var numberAv=  parseInt(document.getElementById("store-from-current-quantity").value);
numberAv.elX.onchange = getMaxValueForRequest;

【问题讨论】：

标签： javascript html validation input

【解决方案1】：

使用Element.setAttribute

注意事项

我已手动为 #store-from-current-quantity 在 HTML 中指定了一个值 - 我假设这是在您应用的其他位置设置的。
change 事件侦听器在模糊/提交/等之前不会触发，因此您可能需要考虑keydown 或keyup。

但是，我对 numberAv.elX.onchange 有一些困惑 - 你为什么要尝试获取数字的 elX 属性？

我已在此示例中删除了第二个输入的disabled 属性，您可以对其进行测试。

function getMaxValueForRequest() {
  var requester = document.getElementById("movement-quantity");
  var currentItemAmount = parseInt(document.getElementById("store-from-current-quantity").value);
  requester.setAttribute('max', currentItemAmount);
}


// init once to set
getMaxValueForRequest()


// listen for changes
document.getElementById("store-from-current-quantity").addEventListener('change', function(event) {
  getMaxValueForRequest()
})

<input id="movement-quantity" class="movement-quantity" type="number" step="1" min="0" max = "1" pattern="\d*" required>
<input id="store-from-current-quantity" class="store-from-current-quantity" type="text" value="5">

【讨论】：

所有这些都应该在同一个脚本标签内吗？
@MNM 有点傻的问题，但可以肯定的是，只要首先定义 getMaxValueForRequest。
对不起，我把它放在了错误的文件中。这有点丢给我，我不知道 js 或 html，边走边学。非常感谢它有效，并且比我所做的要好得多。我真的很感激。

【解决方案2】：

以下代码段演示了如何使用以下方法将输入 1 的值同步到输入 2 的 max 属性：

片段

var in1 = document.getElementById('in1');

in1.addEventListener('input', function(e) {
  var in2 = document.getElementById('in2');
  var out = document.getElementById('out');
  var val = parseInt(in1.value, 10);
  in2.setAttribute('max', val);
  out.value = in2.getAttribute('max');
}, false);

<form id='f1' name='f1'>
  <fieldset>
    <legend>Sync Input1 Value to Input2 Max</legend>
    <label>Input 1:
      <input id='in1' name='in1' type='number'>
    </label>
    <label>Input 2:
      <input id='in2' name='in2' type='number' max=''>
    </label>
    <br/>
    <br/>
    <label>Input 2 max="
      <output id='out' name='out'></output>"</label>

  </fieldset>
</form>

【讨论】：