在多个id上显示onkeyup事件的结果
Posted
技术标签:
【中文标题】在多个id上显示onkeyup事件的结果【英文标题】：Display results of onkeyup event on multiple id 【发布时间】：2021-12-03 08:44:42 【问题描述】：当用户在其中键入时，我试图在多个文本框中获取文本 (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;
结果为
<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>
上面的代码运行良好。
但我想在页面上多次显示每个“onkeyup”输入。所以在这里我需要更新函数和span id（如果我使用相同的id，那么在第二次调用后它不会显示任何内容）
请帮我重新格式化上面的 javascript 和 HTML，所以只需定义输入函数并将其显示在所有 HTML span id 上，而无需每次都更改 span id...
【问题讨论】：
你可以使用class代替id并使用querySelectorAll来选择所有元素这里是代码jsfiddle.net/2kac3t9m 【参考方案1】：您可以使用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>【讨论】：
【参考方案2】：你可以这样做：
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>【讨论】：
谢谢您，先生，但是当我收集所有输入并将其显示在同一网页的不同部分时，仅显示第一个输出..有关详细信息，我正在处理 github.com/bsahane/live【参考方案3】：这是最适合你的！
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>【讨论】：
谢谢先生您的解决方案，但我一次收集所有输入并根据要求将它们全部显示在页面的不同位置。喜欢jsfiddle.net/bsahane/e69L2m01/7 所以你能提供同样的更新吗..以上是关于在多个id上显示onkeyup事件的结果的主要内容，如果未能解决你的问题，请参考以下文章
Android Studio Databinding：我可以在onKey事件中访问绑定的内容吗？
textarea的onkeyup事件与一个JS 特效冲突啥原因？详细问题见补充