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

Question

我制作了一个计算器工具，用户可以在单击 "calculate" 按钮以运行函数和 return 计算值之前完成大约 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>

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

Answer 1

同时在文本输入中执行 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>

Answer 2

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

使用 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>

Answer 3

您可以对 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>

Answer 4

为此，您还可以从文本字段的 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属性；尽可能使用不显眼的事件处理程序。

Answer 5

改为使用事件委托，并在包含所有输入字段的整个容器上侦听 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>

Answer 6

绑定元素 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>

Answer 7

<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>

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

Function runs when any text input is changed

html

javascript

jquery

calc