javascript - 如何在更改值而不是单击按钮时运行函数？

我现在有多个文本框，因此我希望在文本框中找到它们的最小值。

当我单击按钮时，此功能可以正常工作。在任何文本框中进行更改（尽管不使用onclick事件）时，都需要更新它。我怎么做？

function minimum() {
  var a = document.getElementById("1").value;
  var b = document.getElementById("2").value;
  var c = document.getElementById("3").value;
  var d = document.getElementById("4").value;
  var m = Math.min(a, b, c, d);
  document.getElementById("5").value = m;
}

<input type="text" class="a1" id="1" value="1" />
<input type="text" class="a1" id="2" value="2" />
<input type="text" class="a1" id="3" value="3" />
<input type="text" class="a1" id="4" value="4" />
<input type="button" onclick="minimum()" value="MIN" />

<br /><br />
<input type="text" class="a2" id="5">

最佳答案

为此，您可以将input事件处理程序附加到所有.a1元素，这些元素使用map()构建这些输入的值的数组，然后可以将其提供给Math.min()以检索最小值。

正如您使用jQuery标记问题一样，以下是使用该问题的实现：

$('.a1').on('input', function() {
  var values = $('.a1').map(function() {
    return parseInt(this.value, 10) || null;
  }).get();

  $('#5').val(Math.min.apply(Math, values));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="a1" />
<input type="text" class="a1" />
<input type="text" class="a1" />
<input type="text" class="a1" />

<br /><br />
<input type="text" class="a2" id="5">

请注意，这会否定使用递增的id属性，这表示代码有异味。

关于javascript - 如何在更改值而不是单击按钮时运行函数？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50736741/