从键盘输入一个单词并将每个字母存储到一系列多输入文本框中答案

【问题标题】：Type a word from the keyboard and store each letter into a series of multiple input text boxes从键盘输入一个单词并将每个字母存储到一系列多输入文本框中
【发布时间】：2013-10-24 05:17:17
【问题描述】：

我想向用户展示几个input 文本框，允许他们键入一串字母或字符，以“溢出”的方式将一个字母存储到每个框中。每个框都是一个输入文本类型，限制为 1 个字符。

例如，上图显示了 3 个输入框（不包括显示单词第一个字母的第一个框）。如果我连续输入 a s t，“a”应该进入 box2，“s”应该进入 box3，“t”应该进入 box4。这可能吗？

目前，我只能设法在每个框中键入一个字母，然后必须按 Tab 键或使用鼠标将焦点移动到右侧的下一个输入框。

我需要什么神奇的 CSS/HTML/Javascript 来完成这个任务，陛下？

【问题讨论】：

标签： javascript jquery html input

【解决方案1】：

如果您需要 jquery 解决方案，则可以使用.keyup() 事件和if 条件，它将检查input 字段的长度，如果超过1，它将focus下一个字段。

Demo

$("input").keyup(function() {
    if($(this).val().length >= 1) {
      var input_flds = $(this).closest('form').find(':input');
      input_flds.eq(input_flds.index(this) + 1).focus();
    }
});

确保您还在input 字段上使用maxlength 属性，以便用户快速键入不会超过字符限制。

Demo 2

【讨论】：

嗨，外星人先生。感谢 jsfiddle 代码有效！如果我的屏幕周围有几个其他表单输入框，但我想将此效果（每个字母的溢出）限制为只有一组三个输入框，我该怎么办？
@user1029442 为您的表单元素分配一个类并执行类似$("form.class_name input")
嗨，外星人先生。是的！！！我使用了这个 JQuery 代码：$("span.ipadsize input").keyup(function() { ... }。然后在我的源代码中，我使用了 ... 附上输入代码。就像一个魅力。太棒了！非常感谢！！！
@user1029442 那行不行？如果是这样，请考虑通过单击答案旁边的勾号将答案标记为正确:) jsfiddle.net/GUaZB/4
@user1029442 您应该将帖子标记为答案，以便其他人知道正确答案

【解决方案2】：

正如@Mr.Alien 所说，设置 MaxLength 属性将保护文本框具有超过 1 个字符的文本。此外，您应该在获得焦点时选择文本框中的文本。如果用户再次从第一个文本框开始，它将简化过程。

$("input").keyup(function() {

      var input_flds = $(this).next("input");
      input_flds.select().focus();

});

DEMO是@Mr.Alien演示的修改副本

更新：

在选中的文本框中实现上述概念，【概念：为需要应用的文本框设置一个类】

$("input").keyup(function() {

    var input_flds = $(this).nextAll(".test:first");
    input_flds.select().focus();

});

//where .test will be your class on the selected text boxes.

DEMO - 1

【讨论】：

嗨 RajaPrabhu - 非常感谢！是的，它工作得很好。如果你曾经在马来西亚，我会请你吃榴莲自助餐。希望你能吃到榴莲；-)。
@user1029442 谢谢。请参阅我的新更新以满足您的原始需求。顺便说一句，如果您觉得我的回答有用，请接受它，以帮助未来的推荐人。
@RajaPrabhuOfficial 是的，我保留了表单的这种方法，谢谢你的重构:)
如何将两个答案都勾选为正确！只允许一个绿色勾号？ :-(
@user1029442 没问题，我从您接受的答案中继承了很多东西。真正的功劳应该属于他。顺便说一句，如果我的回答有助于解决您的问题，您可以投票赞成。