title: How to create an arcade style name input in Javascript?
body: <p>I'm trying to create an arcade style name input for a highscore list. I'd like it to work using just the arrow keys on the keyboard, so up/down arrow for character selection and left/right for input box selection. I'm using a MakeyMakey for this project, so I want to keep user/keyboard interaction as minimal as possible.</p>
  
  <p>Right now I'm rendering <code>select</code> boxes containing the entire alphabet in <code>option</code> tags, however, a <code>select</code> box always drops down, and your choice has to be confirmed using <code>Enter</code> or a mouse-click.</p>
  
  <p>I'd like to stay at least a little semantically correct on the input, so I'm thinking 3 inputs that each select one letter, then concatenating these in a hidden input field, of which I can pass the value to Rails.</p>
  
  <p>I'm using the following jQuery-plugin (from: <a href="http://ole.michelsen.dk/blog/navigate-form-fields-with-arrow-keys.html" rel="nofollow noreferrer">http://ole.michelsen.dk/blog/navigate-form-fields-with-arrow-keys.html</a>) to navigate between <code>select</code> boxes using the left/right arrow keys. </p>
  
  <pre><code>(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);
  </code></pre>
  
  <p>What I want to implement next is three input boxes that have the entire (infinitely looped) alphabet as choices, navigable by up/down arrow. I'd rather not type out the entire alphabet so I want to generate the options for each box and probably bind a keyhandler somewhere. How would I generate such an input box and integrate the required code into my existing script?</p>
  
  <h3>Screenshots</h3>
  
  <p>This is how it looks now:</p>
  
  <p><img src="https://i.stack.imgur.com/yHhmh.png" alt="Current situation"></p>
  
  <p>Ideally, it will look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/n3Hdz.png" alt="Ideal situation"></p>