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

我的方法是捕获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");
}

• 可能包含错误(未测试),可以优化

希望它有帮助。