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

Question

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

现在我正在select个option标记中包含整个字母的select个框，但是，Enter框始终会下降，您的选择必须使用{{ 1}}或鼠标单击。

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

我正在使用以下jQuery-plugin（来自：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);

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

截图

现在的样子：

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

Answer 1

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

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>

分叉 Codepen ，但在代码段中也可以正常使用。我的想法：

• 我不知道密钥代码，我不希望知道密钥代码。
• 我们对整篇文档中的按键不感兴趣，只是对首字母的输入感兴趣。
• 如果你必须有分支逻辑，请清楚有多少条路径，一条。
• 如果这些是我们的表格输入，那么他们至少应该得到tabindex。实际上我会使用<input>，但这只会在演示中添加一堆CSS。
• 重点是键盘支持。我很确定我们需要处理用户输入字母的情况。
• 当有人按箭头键时，不要让页面晃动。

Answer 2

它非常简单，只需要进行一些计算：

如果您有任何疑问，请随时提出。

＆＃13;

＆＃13;

$(function() {
  $(document).on("keydown", function(ev) {
    if (ev.keyCode == 39) {
      var idx = $('.active').index();
      var next_idx = (+idx + 1) % $('.cyclic_input').length;
      $('.active').removeClass('active');
      $('.cyclic_input').eq(next_idx).addClass('active');
    }
    if (ev.keyCode == 37) {
      var idx = $('.active').index();
      var next_idx = ((+idx - 1) + $('.cyclic_input').length) % $('.cyclic_input').length;
      $('.active').removeClass('active');
      $('.cyclic_input').eq(next_idx).addClass('active');
    }

    if (ev.keyCode == 38) {
      var char = $(".active").text();
      var ascii = char.charCodeAt(0);
      var nextAscii = 65 + (ascii + 1 - 65) % 26;
      $(".active").text(String.fromCharCode(nextAscii));
    }
    if (ev.keyCode == 40) {
      var char = $(".active").text();
      var ascii = char.charCodeAt(0);
      var nextAscii = 65 + ((ascii - 1 - 65) + 26) % 26;
      $(".active").text(String.fromCharCode(nextAscii));
    }
  });
});

＆＃13;

.cyclic_input {
  width: 50px;
  height: 50px;
  display: inline-block;
  border: 5px solid red;
  font-size: 3em;
}
.active {
  border-color: blue;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是 Fiddle

PS：这里的代码片段效果不好，但如果您测试代码或检查jsfiddle，它将正常工作。