如何在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结构是很好的。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">2/2...要使用的技术称为Event delegationDavid Walsh :: How JavaScript Event Delegation Works...javascript.info :: Event DelegationjQuery :: Understanding Event Delegation
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>相关文章