2

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

在此处输入图像描述

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

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

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

参考/相关： http: //moodurian.blogspot.com/2013/09/how-i-managed-to-allow-input-of-only-1.html

4

2 回答 2

2

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

演示

$("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();
    }
});

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

演示 2

于 2013-10-24T05:36:25.360 回答
1

正如@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.

演示 - 1

于 2013-10-24T06:09:09.507 回答