更改任何文本输入时函数运行答案

【问题标题】：Function runs when any text input is changed更改任何文本输入时函数运行
【发布时间】：2019-01-17 19:28:47
【问题描述】：

我制作了一个计算器工具，它有大约 10 种不同的文本输入供用户在单击“计算”按钮运行函数并返回计算值之前完成。我希望每次更改文本输入时都运行该函数，而不是使用按钮。下面是一个简单的例子：

function calculate() {
	//Inputs ("parseInt" converts string to Int)
	var A = parseInt(document.getElementById("A").value);
	var B = parseInt(document.getElementById("B").value);		
	var total = A*B;

	//Output
	document.getElementById("total").value = total;
};

	<input type="text" id="A"> x
<input type="text" id="B">
<input type="button" onClick="calculate()" value="Calculate"> = 
<output id="total"></output>

上面的示例有两个文本输入，当单击按钮时它们会相乘。最好的方法是什么，以便每次更改文本输入时计算输出？请记住，实际项目有多个文本输入。

【问题讨论】：

标签： javascript jquery html calc

【解决方案1】：

<input type="text" onInput="calculate()" id="A"> x
<input type="text" onInput="calculate()" id="B"> x
<input type="text" onInput="calculate()" id="C"> =
<output id="total"></output>



<script>
function calculate() {
//Inputs ("parseInt" converts string to Int)
var A = parseInt(document.getElementById("A").value);
var B = parseInt(document.getElementById("B").value);
var C = parseInt(document.getElementById("C").value);

var total;
if(isNaN(A)){
  A=1;
}
if(isNaN(B)){
  B=1;
}
if(isNaN(C)){
  C=1;
}
total = A*B*C;  
//Output
document.getElementById("total").value = total;
};
</script>

【讨论】：

【解决方案2】：

在两个文本输入中对oninput 执行函数：

function calculate() {
  //Inputs ("parseInt" converts string to Int)
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);		
  var total = A*B;

  //Output
  document.getElementById("total").value = total;
};

<input type="text" id="A" oninput="calculate()"> x
<input type="text" id="B" oninput="calculate()">
<input type="button" onClick="calculate()" value="Calculate"> = 
<output id="total"></output>

或：您可能希望使用forEach() 附加事件：

function calculate() {
  //Inputs ("parseInt" converts string to Int)
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);		
  var total = A*B;

  //Output
  document.getElementById("total").value = total;
};

var allTextInput = document.querySelectorAll('input[type=text]');
[...allTextInput].forEach(el => el.addEventListener('input', calculate));

<input type="text" id="A" oninput="calculate()"> x
<input type="text" id="B" oninput="calculate()">
<input type="button" onClick="calculate()" value="Calculate"> = 
<output id="total"></output>

【讨论】：

这不是最优的，因为 OP 提到他有很多这样的输入控件，你建议将oninput="calculate()" 添加到所有肯定不灵活的控件中
另请注意，在querySelectorAll() 上调用forEach() 在IE 中不起作用

【解决方案3】：

绑定元素change、keyup和mouseup事件来触发你的calculate函数。

我推荐几个循环和addEventListener：

function calculate() {
  //Inputs ("parseInt" converts string to Int)
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);
  var total = A * B;

  //Output
  document.getElementById("total").value = total;
};

for (var elm of [document.getElementById("A"), document.getElementById("B"), document.getElementById("Calculate")]) {
  for (var st of ['change', 'keyup', 'mouseup', 'click']) {
    elm.addEventListener(st, calculate)
  }
}

<input type="number" id="A"> x
<input type="number" id="B">
<input type="button" id="Calculate" value="Calculate"> =
<output id="total"></output>

【讨论】：

谢谢，您的解决方案最适合我的情况。非常感谢！

【解决方案4】：

改为使用事件委托，并在包含所有输入字段的整个容器上侦听 input 事件 - 这样，您只需添加一个侦听器，而不是为每个元素手动添加侦听器：

document.body.addEventListener('input', ({ target }) => {
  console.log('Saw a change on element ' + target.id);
  if (target.id === 'A' || target.id === 'B') {
    var A = parseInt(document.getElementById("A").value);
    var B = parseInt(document.getElementById("B").value);		
    var total = A*B;

    //Output
    document.getElementById("total").value = total;
  }
});

<div>
<input type="text" id="A"> x
<input type="text" id="B">
</div>
<output id="total"></output>
<div>
<input type="text" id="C"> +
<input type="text" id="D">
</div>
<div>
<input type="text" id="E"> /
<input type="text" id="F">
</div>

【讨论】：

【解决方案5】：

您可以将类名与所有这些输入字段相关联，并向其添加keyup 事件。非常适合多个元素，因为您通过类名管理所有内容，错误或错误的可能性较小

使用 JQUERY

$('.calculateText').keyup(function(){
  var A = parseInt(document.getElementById("A").value);
  var B = parseInt(document.getElementById("B").value);
  var total = A * B;

  //Output
  document.getElementById("total").value = total;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class='calculateText' type="text" id="A"> x
<input class='calculateText' type="text" id="B">
<input type="button" value="Calculate"> =
<output id="total"></output>

使用 JAVASCRIPT

var elems = document.querySelectorAll('.calculateText');
elems.forEach(function(elem) {
  elem.addEventListener('keyup', function() {
    var A = parseInt(document.getElementById("A").value);
    var B = parseInt(document.getElementById("B").value);
    var total = A * B;

    //Output
    document.getElementById("total").value = total;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input class='calculateText' type="text" id="A"> x
<input class='calculateText' type="text" id="B">
<input type="button" value="Calculate"> =
<output id="total"></output>

【讨论】：

注意在querySelectorAll()上调用forEach()在IE中不起作用

【解决方案6】：

要实现这一点，您还可以从文本字段的 input 事件中调用 calculate() 函数：

document.getElementById('calculate').addEventListener('click', calculate);

Array.from(document.querySelectorAll('input')).forEach(function(el) {
  el.addEventListener('input', calculate);
});

function calculate() {
  var A = parseInt(document.getElementById("A").value) || 0;
  var B = parseInt(document.getElementById("B").value) || 0;
  var total = A * B;

  document.getElementById("total").value = total;
};

<input type="text" id="A" class="input"> x
<input type="text" id="B" class="input">
<input type="button" value="Calculate" id="calculate"> =
<output id="total"></output>

注意计算中NaN 到0 的强制转换，同时删除了过时的onclick 属性；尽可能使用不显眼的事件处理程序。

【讨论】：

有点跑题了，但展示你如何将 NaN 更改为 0 实际上也确实帮助了我。所以谢谢:)
随意更改接受的答案，然后 :) 我建议使用单个 input 处理程序，而不是像您选择的答案那样附加多个不必要的事件处理程序。

【解决方案7】：

您可以在输入的onInput 上执行calculate。您可能需要进行的一项检查是空白输入或非数字输入值，否则它会在结果中显示NaN。

function calculate() {
	//Inputs ("parseInt" converts string to Int)
	var A = parseInt(document.getElementById("A").value);
	var B = parseInt(document.getElementById("B").value);
  var total;
  if(isNaN(A) || isNaN(B)){
    total = "Invalid Operation";
  }
  else{
	  total = A*B;  
  }

	//Output
	document.getElementById("total").value = total;
};

<input type="text" onInput="calculate()" id="A"> x
<input type="text" onInput="calculate()" id="B">
<output id="total"></output>

【讨论】：