将文本字段划分为字母块

Question

如何制作阻止文字字段？就像我们从字母块而不是整个计划文本中获取用户的输入一样，就像在此图像中一样

Answer 1

我通常会选择最简单的解决方案。在这种情况下，用户可以输入一个单独的字段。

使用分割字段，例如4-box，你会为用户增加额外的认知负担。

   •“我是否需要手动跳转到每个字段？”

•“系统会为我做这件事吗？”

•“如果我自己点击标签但表格会自动跳转怎么办？它会跳到第3个字段而不是......？”

所有这些额外的问题 - 也许是潜意识的，或许在他们的脑海中更为重要 - 不是甚至可以在单一领域形式中考虑的问题。

当然，4字段选项有助于提高可读性 - 因此，如果用户输入错误的数字，他们就会更容易重新阅读他们的条目，看看他们做错了哪个区域。但这仍然可以在一个领域得到缓解。正如您在上面所示，您可以在单个字段中使用空格呈现用户输入。

另一个考虑因素是移动用户。虽然在桌面上可能很简单，但移动设备有一个键盘，它需要在进入现场时打开和关闭。不同的设备和操作系统的行为不同，但很可能在从字段1跳到字段2时，键盘将自动关闭并自动打开，导致屏幕上出现震动，用户可能会在键盘关闭时尝试单击第5位数字从而将光标完全移动到屏幕的另一个区域，或者完全从输入中删除该数字。

这个移动问题很好地体现在Baymard博客上，他们还指出移动用户倾向于手动压入每个字段 - 这是桌面用户不常做的事情。

你的提议是一个好主意，但我认为它属于“过度工程”的范畴。除非您注意到单个字段上的重大用户输入错误，否则我认为您不需要引入替代方案。您可能会降低可用性，而不是改进它。

Answer 2

您可以在inputFields

中创建多个div

类似这样的事情

<div class="fields">
  <input type="text">
  <input type="text">
  <input type="text">
  <input type="text">
  ...
</div>


.fields input[type="text"] {
  display: inline-block;
  vertical-align: top;
}

Answer 3

maxlength 1的多输入

$("input").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next("input").focus();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset class="container">
 <legend>Name : </legend>
 
  <input type="text" name="name[]" maxlength="1" size="1">  
  <input type="text" name="name[]" maxlength="1" size="1">
  <input type="text" name="name[]" maxlength="1" size="1">
  <input type="text" name="name[]" maxlength="1" size="1">
  <input type="text" name="name[]" maxlength="1" size="1">
  <input type="text" name="name[]" maxlength="1" size="1">
</fieldset>
<fieldset>
  <legend>Father name : </legend>
  <input type="text" name="father_name[]" maxlength="1" size="1">  
  <input type="text" name="father_name[]" maxlength="1" size="1">
  <input type="text" name="father_name[]" maxlength="1" size="1">
  <input type="text" name="father_name[]" maxlength="1" size="1">
  <input type="text" name="father_name[]" maxlength="1" size="1">
  <input type="text" name="father_name[]" maxlength="1" size="1">
</fieldset>
</form>