jQuery不影响文本输入

Question

我无法让jQuery影响我的文本输入 - 应该发生的是我应该能够通过按向上和向下箭头键来滚动文本形式的字母表，但这不会发生。文本表单实例化为此类 - jQuery('#canvas').after('<div id="user-name-input"><input type="text" id="scrollLetters:/></div>');

正如预期的那样，文本框中的初始值为“_”，但是当我按向上或向下箭头时，没有任何影响。它应该将“_”变为“A”，并用另一个键按“B”，依此类推。也许这与光标聚焦的位置有关？

     var letterIndex = 0;

     function replaceLetter(index, charCode, originalString){
     originalString = originalString.substr(0, index) + 
     String.fromCharCode(charCode) + originalString.substr(index + 
     String.fromCharCode(charCode).length);
     console.log("new", originalString);
     $("#scrollLetters").val(originalString);

    }
   function addBlank(){
    $("#scrollLetters").val(  $("#scrollLetters").val() + "_" );
  }
  function removeBlank(){
$("#scrollLetters").val(  $("#scrollLetters").val().slice(0,-1) );
 }

    $("body").keydown(function(e){
    console.log(e);
    var originalString = $("#scrollLetters").val();
    console.log(originalString);
    var charCode = originalString.charCodeAt(letterIndex);
    console.log("charCode ", charCode);

switch (e.which){
    case 38:    //up arrow key
        if((charCode == 95) || (charCode == 97))
            //charCode = 122;
        //else if(charCode == 97)
            charCode = 122;
        else
            charCode--;

        replaceLetter(letterIndex, charCode, originalString);
        break;
    case 40:    //bottom arrow key
        if( (charCode == 95) || (charCode == 122))

            charCode = 97;
        else
            charCode++;


        replaceLetter(letterIndex, charCode, originalString);
        break;
    case 39:    //right arrow key
        if ((letterIndex == originalString.length-1) && (charCode == 95)){
            console.log("already having a blank spot");
            break;
        }else if((letterIndex == originalString.length-1) && (charCode != 95)){
            addBlank();
        }
        letterIndex++;
        break;
    case 37:    //left arrow key
        if ((originalString.charCodeAt( originalString.length - 1) == 95) && letterIndex > 0)
            removeBlank();
        if(letterIndex > 0)
            letterIndex--;
        break;
    case 13:    // SUBMIT - change here whatever you want to do with the name
        // also here i would make sure that the user actually did enter a name
        let s = originalString; 
        if ((originalString.charCodeAt( originalString.length - 1) == 95) && letterIndex > 0)
            s = s.slice(0,-1);
        let h = document.createElement("p");
        h.innerHTML = "YOUR NAME IS " + s + " !";
        document.body.appendChild(h);
        break;
        }
        });

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


function nameInputField(action, data) { /* TIVLABS */
    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 id=scrollLetters readonly=true 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;
    }
}