使用箭头键

Question

有没有办法在html文本输入表单中使用箭头键迭代字母表中的字母？

这个想法是能够像旧的街机一样滚动字母表。

谢谢！

编辑：尝试将其与现有代码合并：

function nameInputField(action, data) { 
    switch(action) {
        case 'focus':
            jQuery('#canvas').next('#user-name-
input').find('input').focus();
        break;
        case 'value':
            return jQuery('#canvas').next('#user-name-input').length > 
0 ? jQuery('#canvas').next('#user-name-
input').find('input').val().toUpperCase() : '';
        break;
        case 'submit_btn':
            if(typeof(data) != 'undefined') {
                jQuery('#canvas').next('#user-name-
input').find('input').data('submitbtn', data).keyup(function(e) {
                    var key = e.keyCode || e.which;
                    if(key == 13
                    && typeof(jQuery(this).data('submitbtn')) != 
'undefined') {
                        var submit_btn = 
jQuery(this).data('submitbtn');
                        if(typeof(submit_btn.buttonRelease) != 
'undefined')
                            submit_btn.buttonRelease();
                    }
                });
            }
        break;
        case 'remove':
            jQuery('#canvas').next('#user-name-
input').empty().remove();
        break;
        case 'add':
        default:
            jQuery('#canvas').after('<div id="user-name-input"><input 
type="text" value="" /></div>');
            jQuery('#canvas').next('#user-name-
input').find('input').on('keydown keyup', function(e) { 
jQuery(this).val(jQuery(this).val().replace(/[^a-zA-Z 0-9]+/g, 
'').slice(0, 18)); });
        break;
    }
}

Answer 1

这是代码。您可以使用向上和向下箭头键。 想法是获取元素内部文本的char代码，然后在char代码中添加一个或减去一个，因为字母表的char代码就像这样97 = a，98 = b，99 = c，... 122 = ž

对于此示例，您必须先在文本框内单击

＆＃13;

＆＃13;

var letterIndex = 0;
$("#scrrollLetters").keydown(function(e){
  var originalString = this.value;
  var charCode = originalString.charCodeAt(letterIndex);
  
    switch (e.which){
      case 38:    //up arrow key
          if(charCode == 97)
            charCode = 122;
          else
            charCode--;
            
            
          this.value = replaceAt(letterIndex, String.fromCharCode(charCode), originalString);
          break;
      case 40:    //bottom arrow key
          if(charCode == 122)
            charCode = 97;
          else
            charCode++;
            
          
          this.value = replaceAt(letterIndex, String.fromCharCode(charCode), originalString);
          break;
      case 39:    //right arrow key
          if(letterIndex == this.value.length -1)
            letterIndex = 0;
          else
            letterIndex++;
          break;
      case 37:    //left arrow key
          if(letterIndex == 0)
            letterIndex = this.value.length -1;
          else
            letterIndex--;
          break;
    }
});

function replaceAt(index, replacement, myLetters) {
    return myLetters.substr(0, index) + replacement+ myLetters.substr(index + replacement.length);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id=scrrollLetters readonly=true value=aaaaaaaaaa />

＆＃13;

＆＃13;

＆＃13;

使用标签和文档按键事件

的另一个示例

＆＃13;

＆＃13;

var letterIndex = 0;
$(document).keydown(function(e){
  var originalString = $("#scrrollLetters").text();
  var charCode = originalString.charCodeAt(letterIndex);
  
    switch (e.which){
      case 38:    //up arrow key
          if(charCode == 97)
            charCode = 122;
          else
            charCode--;
            
            
          $("#scrrollLetters").text(replaceAt(letterIndex, String.fromCharCode(charCode), originalString));
          break;
      case 40:    //bottom arrow key
          if(charCode == 122)
            charCode = 97;
          else
            charCode++;
            
          
          $("#scrrollLetters").text(replaceAt(letterIndex, String.fromCharCode(charCode), originalString));
          break;
      case 39:    //right arrow key
          if(letterIndex == originalString.length -1)
            letterIndex = 0;
          else
            letterIndex++;
          break;
      case 37:    //left arrow key
          if(letterIndex == 0)
            letterIndex = originalString.length -1;
          else
            letterIndex--;
          break;
    }
});

function replaceAt(index, replacement, myLetters) {
    return myLetters.substr(0, index) + replacement+ myLetters.substr(index + replacement.length);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id=scrrollLetters>aaaaaaaaa</label>

＆＃13;

＆＃13;

＆＃13;