如何在JavaScript中对多个输入字段使用addEventListener来调用KeyUp事件？-前端问题

How to use addEventListener on multiple input fields to invoke keyup event on them in JavaScript?(如何在JavaScript中对多个输入字段使用addEventListener来调用KeyUp事件？)

本文介绍了如何在JavaScript中对多个输入字段使用addEventListener来调用KeyUp事件？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有多个输入字段，我希望通过传递TextBox的ID作为参数对所有这些字段应用onkeyup事件。我想要多个KeyUp事件，因为我想处理一些基于输入ID的计算。我尝试了，但失败了。请提出一些解决方案。

function GetDynamicTextBox(value) {
            return "<td>"
            +"<select class='js-example-placeholder-single js-states form-control loadcompany' id='lcompanyselect' onchange='getDriverAndTruck()';></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_co'></td>"
            +"<td><select class='js-example-placeholder-single js-states form-control' id='ldriverselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_driver'></td>"
            +"<td class=''><select class='js-example-placeholder-single js-states form-control' id='ltruckselect'></select>"
            +"<input type='button' value='+' class='qty-plus' data-toggle='modal' data-target='#edit_truck'></td>"
            +"<td><input name='tripnumber' type='text' class='form-control' id='ltripnumber'/></td>"
            +"<td><select id='lsubtrip' name='subtrip' class='js-example-placeholder-single js-states form-control'>"
            +"<option disabled selected></option><option value='1'>1</option><option value='2'>2</option>"
            +"<option value='3'>3</option></select>"
            +"<td><input name='date' type='date' class='form-control' id='ldate'/></td>"
            +"<td><input name='pickupcity' type='text' class='form-control' id='lpickupcity'/></td>"
            +"<td><input name='pickupstate' type='text' class='form-control' id='lpickupstate'/></td>"
            +"<td><input name='deliverydate' type='date' class='form-control' id='ldeliverydate'/></td>"
            +"<td><input name='delivercity' type='text' class='form-control' id='ldelivercity'/></td>"
            +"<td><input name='deliverstate' type='text' class='form-control' id='ldeliverstate'/></td>"
            +"<td><input name='loadnumber' type='text' class='form-control' id='lloadnumber'/></td>"
            +"<td><input name='loadrate' type='text' class='form-control' id='lloadrate' onkeyup='countload();'/>"
            +"<span id='lerrormessage'></span></td>"
            +"<td><input name='dispatchfee' type='text' class='form-control' id='ldispatchfee' readonly/></td>"
            +'<td><input name="fuel" type="text" class="form-control count" id="lfuel" onkeyup="lcount('"+lfuel+"');"/></td>'
            +"<td><input name='cardfee' type='text' class='form-control count' id='lcardfee' onkeyup='lcount('lcardfee');'/></td>"
            +"<td><input name='onloadrepair' type='text' class='form-control count' id='lonloadrepair' onkeyup='lcount('lonloadrepair');'/></td>"
            +"<td><input name='shoprepair' type='text' class='form-control count' id='lshoprepair' onkeyup='lcount('lshoprepair');'/></td>"
            +"<td><input name='trailerrent' type='text' class='form-control count' id='ltrailerrent' onkeyup='lcount('ltrailerrent');'/></td>"
            +"<td><input name='comcheck' type='text' class='form-control count' id='lcomcheck' onkeyup='lcount('lcomcheck');'/></td>"
            +"<td><input name='advance' type='text' class='form-control count' id='ladvance' onkeyup='lcount('ladvance');'/></td>"
            +"<td><input name='miscellenous' type='text' class='form-control count' id='lmiscellenous' onkeyup='lcount('lmiscellenous');'/></td>"
            +"<td><input name='misc1' type='text' class='form-control count' id='lmisc1' onkeyup='lcount('lmisc1');'/></td>"
            +"<td><input name='misc2' type='text' class='form-control count' id='lmisc2' onkeyup='lcount('lmisc2');'/></td>"
            +"<td><input name='misc3' type='text' class='form-control count' id='lmisc3' onkeyup='lcount('lmisc3');'/></td>"
            +"<td><input name='misc4' type='text' class='form-control count' id='lmisc4' onkeyup='lcount('lmisc4');'/></td>"
            +"<td><input name='total' type='text' class='form-control' id='ltotal' readonly/></td>"
            +"<td><input name='layover' type='text' class='form-control count' id='llayover' onkeyup='lcount('llayover');'/></td>"
            +"<td><input name='addtl1' type='text' class='form-control count' id='laddtl1' onkeyup='lcount('laddtl1')'/></td>"
            +"<td><input name='addtl2' type='text' class='form-control count' id='laddtl2' onkeyup='lcount('laddtl2');'/></td>"
            +"<td><input name='addtl3' type='text' class='form-control count' id='laddtl3' onkeyup='lcount('laddtl3');'/></td>"
            +"<td><input name='subtotal' type='text' class='form-control' id='lsubtotal' readonly/></td>"
            +"<td><input name='paymentmode' type='text' class='form-control' id='lpaymentmode'/></td>"
            +"<td><input name='pay' type='text' class='form-control' id='lpay' onkeyup='countleftpay();'/></td>"
            +"<td><input name='notes' type='text' class='form-control' id='lnotes'/></td>"
            +"<td><input name='grandtotal' type='text' class='form-control' id='lgrandtotal' readonly/></td>"
            +"<td><button type='button' class='btn btn-outline-info text-info' onclick='savetriplist();'>Submit</button>" 
        }

推荐答案

来自上述评论...

1/2...最有可能的是，OP需要单个事件侦听器，它将(必须)分配/附加到GetDynamicTextBox的返回值被呈现到的那个元素节点。因此，在示例代码中还提供了meta/out html结构是很好的。

2/2...要使用的技术称为Event delegationDavid Walsh :: How JavaScript Event Delegation Works...javascript.info :: Event DelegationjQuery :: Understanding Event Delegation

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function createTextBoxMarkup(/* value */) {
  return `
    <td>
      <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/>
    </td>
    <td>
      <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/>
    </td>
    <td>
      <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/>
    </td>`;
}

function handleTextBoxKeyup(evt) {
  const elmInput = evt.target;
  const { type, name, id, value } = elmInput;

  console.log({ elmInput, type, name, id, value });  
}

function init() {
  const elmTBody = document.querySelector('tbody');
  const elmTr = document.createElement('tr');

  elmTr.innerHTML = createTextBoxMarkup();
  elmTBody.appendChild(elmTr);

  // register 'keyup' event type.
  elmTBody.addEventListener('keyup', handleTextBoxKeyup);
}
init();

body { margin: 0; }
.as-console-wrapper { min-height: 83%; }

<table>
  <tbody>
  </tbody>
</table>

根据操作员的其他问题

编辑

我可以使用

function GetDynamicTextBox(value) {
  return '<td><input type="text" id="lfuel" onkeyup="count('lfuel');"/></td><td><input type="text" id="lcardfee" onkeyup="count('lcardfee');" /></td>'
}

，然后将该计数器定义为

function count(id) {
  if (id == 'lfuel') {
    var a = document.getElementById('lfuel').value;
  }
  if (id == 'lcardfee') {
    var b = document.getElementById('lcardfee').value;}
}

-Rakhi

以上解决方案对我无效。-Rakhi

handleTextBoxKeyup的实现只是演示如何从event对象中提取信息的示例代码。当然，OP可以根据她/他的需要实现处理程序，例如，只要event.target是"text"类型的输入元素，就从处理程序内调用count函数。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function createTextBoxMarkup(/* value */) { return ` <td> <input name = "deliverydate" type="date" class="form-control" id="ldeliverydate"/> </td> <td> <input name = "delivercity" type="text" class="form-control" id="ldelivercity"/> </td> <td> <input name = "deliverstate" type="text" class="form-control" id="ldeliverstate"/> </td>`; } function isTextTypeInputElement(elmNode) { return ( (elmNode?.tagName.toLowerCase() === 'input') && (elmNode?.type === 'text') ); } function count(elmTextInput) { const { name, id, value } = elmTextInput; console.log({ elmTextInput, name, id, value }); } function handleTextBoxKeyup(evt) { const elmNode = evt.target; if (isTextTypeInputElement(elmNode)) { count(elmNode); } } function init() { const elmTBody = document.querySelector('tbody'); const elmTr = document.createElement('tr'); elmTr.innerHTML = createTextBoxMarkup(); elmTBody.appendChild(elmTr); // register 'keyup' event type. elmTBody.addEventListener('keyup', handleTextBoxKeyup); } init();

body { margin: 0; } .as-console-wrapper { min-height: 83%; }

<table> <tbody> </tbody> </table>