显示来自多个单独输入的键入字符
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了显示来自多个单独输入的键入字符相关的知识，希望对你有一定的参考价值。
我希望来自4个单独输入的字符始终显示在div.showPass中。为什么字符要输入几次？
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<div class="showPass"></div>
var pinInput = document.querySelectorAll('input')
for(var i=0; i < pinInput.length; i++)
pinInput[i].addEventListener('input',function()
for(var i=0; i < pinInput.length; i++)
if(pinInput[i].value.length === 1)
document.querySelector('.showPass').textContent += pinInput[i].value;
);
答案
您总是+=升级到现有的textContent。相反，当您计划再次更新textContent元素时，需要清除现有的.showPass：
var pinInput = document.querySelectorAll('input')
for (var i = 0; i < pinInput.length; i++)
pinInput[i].addEventListener('input', function()
document.querySelector('.showPass').textContent = '';
for (var i = 0; i < pinInput.length; i++)
if (pinInput[i].value.length === 1)
document.querySelector('.showPass').textContent += pinInput[i].value;
);<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<div class="showPass"></div>以上是关于显示来自多个单独输入的键入字符的主要内容，如果未能解决你的问题，请参考以下文章
用户键入字母时如何使用 ajax 自动完成来显示 MySQL 数据库中的值