Question

我们希望模仿用户输入一次一个字母（供儿童使用）。假设他们打算输入“你好”，我们希望分别捕获所有字母。（例如，您将显示类似5个下划线的内容，以表明他们必须提供5个输入）。假设他们输入了（即最后一个字母是错误的），他们可以按退格按钮将其删除。

我们尝试使用输入类型文本字段，但无法获得所需的输出。我们如何通过HTML或jQuery实现这一目标？

Answer 1

我的方法是捕获keydown事件，然后进行验证，如果成功，则显示正确的字母而不是下划线。

简化方案：

HTML（需要一些css格式化）：

...
 <ul id="wordToEnter">
   <li>_</li>
   ...
   <li>_</li>
 </ul>
...

- 或者可以以编程方式生成，关键是每个字母都有一个li元素

Javascript（使用JQuery）：

var currentLetter = 1;
var expectedWord = "HELLO"; // this can be obtained dynamically

$(window).keydown(function (event) { 
  var keyCode = String.fromCharCode(event.keyCode);
  if (keyCode == expectedWord.charAt(currentLetter - 1)) {
     changeUnderscoreToLetter(keyCode);
  }
});

function changeUnderScoreToLetter(letter) {
   $("#wordToEnter>li:nth-child(" + currentLetter + ")").text(letter);
   currentLetter++;
   if (currentLetter > $("#wordToEnter li").length)
      alert("Word enetered");
}

可能包含错误（未经过测试）并且可以进行优化

希望它有所帮助。

如何一次一个字母地将用户输入捕获到字段中

1 个答案: