Estoy tratando de obtener el texto en un cuadro de texto múltiple mientras el usuario escribe en él ( 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; }y resultado como
<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>El código anterior está funcionando bien.
Pero quiero mostrar cada entrada "onkeyup" varias veces en la página. Entonces, aquí necesito actualizar la función y la identificación de intervalo (como si usara la misma identificación, entonces no mostrará nada después de la segunda llamada)
Por favor, ayúdenme a reformatear el JavaScript y el HTML anteriores, así que simplemente defina la función para la entrada y muéstrela en todos los identificadores de tramo HTML sin cambiar el identificador de tramo cada vez...
puedes hacer algo asi:
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>puede usar class en lugar de id y usar querySelectorAll para seleccionar todos los elementos aquí hay un código de muestra
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>esto es lo mejor para ti!
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>