javascript - 如何在 Javascript 中创建街机样式名称输入？

Question

我正在尝试为高分列表创建街机风格的名称输入。我希望它只使用键盘上的箭头键工作，所以上/下箭头用于字符选择，左/右用于输入框选择。我正在为这个项目使用 MakeyMakey，所以我想尽可能减少用户/键盘交互。

现在我正在渲染 select 框，其中包含 option 标签中的整个字母表，但是，select 框总是下拉，并且必须使用 Enter 或单击鼠标来确认您的选择。

我想在输入上至少保持一点语义正确，所以我在考虑 3 个输入，每个选择一个字母，然后将它们连接到一个隐藏的输入字段中，我可以将值传递给 Rails .

我正在使用以下 jQuery 插件(来自:http://ole.michelsen.dk/blog/navigate-form-fields-with-arrow-keys.html)使用左/右箭头键在 select 框之间导航。

(function($) {
  $.fn.formNavigation = function() {
    $(this).each(function() {
      $(this).find('select').on('keyup', function(e) {
        switch (e.which) {
          case 39:
            $(this).closest('td').next().find('select').focus();
            break;
          case 37:
            $(this).closest('td').prev().find('select').focus();
        }
      });
    });
  };
})(jQuery);

我接下来要实现的是三个输入框，它们具有整个(无限循环的)字母表作为选择，可通过向上/向下箭头导航。我宁愿不输入整个字母表，所以我想为每个框生成选项，并可能在某处绑定(bind)一个 keyhandler。我将如何生成这样的输入框并将所需的代码集成到我现有的脚本中？

截图

现在是这样的:

理想情况下，它看起来像这样:

Answer 1

我认为 Banana 的答案很好，但我想尝试让它看起来更具表现力。

KEYCODES = { left: 37, up: 38, right: 39, down: 40 };

$('.cyclic_input').on('keydown',function(ev){
    input = $(this);
    val = $(this).text();
    
    switch (ev.keyCode) {   
      case KEYCODES.right:
        input.next().focus();
        break;
      case KEYCODES.left:
        input.prev().focus();
        break;
      case KEYCODES.up:
        input.text(advanceCharBy(val, 1));
        break;
      case KEYCODES.down:
        input.text(advanceCharBy(val, -1));
        break;
      default:
        if (ev.keyCode >= 65 && ev.keyCode <= 65 + 26) {
            input.text(String.fromCharCode(ev.keyCode));
            input.next().focus();
        }
    };
    ev.preventDefault();
});

advanceCharBy = function(char, distance) {
    oldCode = char.charCodeAt(0);
    newCode = 65 + (oldCode - 65 + 26 + distance) % 26;
    return String.fromCharCode(newCode);
};

.cyclic_input {
    float: left;
    padding: 1rem;
    font-size: 5rem;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.cyclic_input:before,
.cyclic_input:after {
    display: block;
    position: absolute;
    left: 50%;
    font-size: 1rem;
    transform: translateX(-50%);
}

.cyclic_input:before {
    content: '▲';
    top: 0;
}

.cyclic_input:after {
    content: '▼';
    bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cyclic_input" tabindex="0">A</div>
<div class="cyclic_input" tabindex="0">A</div>
<div class="cyclic_input" tabindex="0">A</div>

fork Codepen 但在代码段中也能正常工作。我的想法:

• 我不知道键码，我不想知道键码。
• 我们对整个文档的按键操作不感兴趣，只对首字母输入感兴趣。
• 如果一定要有分支逻辑，要清楚有多少条路径，一个。
• 如果这些是我们的表单输入，那么它们至少应该有 tabindex。实际上我会使用 <input> s 但那样只会向演示中添加一堆 CSS。
• 重点是键盘支持。我很确定我们需要处理用户键入字母的情况。
• 我们不要在有人按下箭头键时翻动页面。