在多个 id 上显示 onkeyup 事件的结果
[英]Display results of onkeyup event on multiple id
问题描述
I am trying to get the text in a multiple text box as the user types in it ( jsfiddle playground ):
当用户在其中输入文本时，我试图在多个文本框中获取文本（ jsfiddle playground ）：
function Input1(a) {
document.getElementById("Input11").innerHTML = a.value;
document.getElementById("Input12").innerHTML = a.value;
document.getElementById("Input13").innerHTML = a.value;
}
function Input2(b) {
document.getElementById("Input21").innerHTML = b.value;
document.getElementById("Input22").innerHTML = b.value;
document.getElementById("Input23").innerHTML = b.value;
}
And Result as结果为
<span id="text-box">
<input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input1(this);">
</span><br><br>
<span id="Input11">Input11</span><br>
<span id="Input12">Input12</span><br>
<span id="Input13">Input13</span><br><br>
<span id="text-box">
<input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input2(this);">
</span><br><br>
<span id="Input21">Input21</span><br>
<span id="Input22">Input22</span><br>
<span id="Input23">Input23</span><br><br>
The above code is working fine.上面的代码工作正常。
But I want to Display each "onkeyup" input multiple times on-page.但我想在页面上多次显示每个“onkeyup”输入。 So here I need to update the function and span id (As if I use the same id then it will not display anything after 2nd call)所以在这里我需要更新函数和 span id（好像我使用相同的 id 那么它在第二次调用后不会显示任何内容）
Please help me to reformat the above JavaScript and HTML so Just Define function for input and display it on all HTML span id without changing span id each time...请帮我重新格式化上面的 JavaScript 和 HTML，所以只需定义输入函数并将其显示在所有 HTML 跨度 ID 上，而无需每次更改跨度 id...
3 个解决方案
解决方案1
1 2021-10-15 04:03:12
you can do somthing like that:你可以做这样的事情：
document.querySelectorAll('div.text-box').forEach( (box,i) => { let intxt = box.querySelector('input') , spTxts = box.querySelectorAll('span') ; intxt.mane = `Jname${++i}` intxt.placeholder = `Input${i}` intxt.onkeyup = () => spTxts.forEach(sp=>sp.textContent = intxt.value) })
.text-box { margin : 20px 0 15px 0; } .text-box input { width : 100%; font-size : 13px; padding : 5px; margin-top : -5px; margin-bottom : 1em; box-shadow : 1px 5px 7px #75757578; } .text-box span { display : block; }
<div class="text-box"> <input type="text"> <span>...</span> <span>...</span> <span>...</span> </div> <div class="text-box"> <input type="text"> <span>...</span> <span>...</span> <span>...</span> </div> <div class="text-box"> <input type="text"> <span>...</span> <span>...</span> <span>...</span> </div> <div class="text-box"> <input type="text"> <span>...</span> <span>...</span> <span>...</span> </div>
解决方案2
1 已采纳 2021-10-15 04:08:17
you can use class instead of id and use querySelectorAll to select all elements here is sample code您可以使用class而不是 id 并使用querySelectorAll来选择所有元素，这里是示例代码
function Input1(a) { const elements = document.querySelectorAll(".Input1"); elements.forEach((e)=>{ e.innerHTML = a.value; }) } function Input2(b) { const elements = document.querySelectorAll(".Input2"); elements.forEach((e)=>{ e.innerHTML = b.value; }) }
<html> <body><span id="text-box"> <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input1(this);"> </span><br><br> <span class="Input1">Input11</span><br> <span class="Input1">Input12</span><br> <span class="Input1">Input13</span><br><br> <span id="text-box"> <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input2(this);"> </span><br><br> <span class="Input2">Input21</span><br> <span class="Input2">Input22</span><br> <span class="Input2">Input23</span><br><br> </body> </html>解决方案3
1 2021-10-15 04:20:45
this is the best for you!这对你来说是最好的！
function Input(a, n) { var spans = document.querySelectorAll('#tb' + n + ' span') spans.forEach(function(span){ span.innerHTML = a.value; }) }
.textbox-value { width: 100%; font-size: 13px; padding: 5px; margin-top: -5px; box-shadow: 1px 5px 7px #75757578; }
<html> <body> <div id="tb1" class="text-box"> <input class="textbox-value" type="text" name="Jname" placeholder="Input1" onkeyup="Input(this, '1');" /> <br><br> <span>Input11</span><br> <span>Input12</span><br> <span>Input13</span><br> </div> <br> <div id="tb2" class="text-box"> <input class="textbox-value" type="text" name="Jbname" placeholder="Input2" onkeyup="Input(this, '2');"> <br><br> <span>Input21</span><br> <span>Input22</span><br> <span>Input23</span><br> </div> <br> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.