如何使用上下箭头获取输入历史记录?

时间:2019-01-27 22:46:48

标签: javascript input input-history

我正在创建一个JavaScript终端,该终端将命令发送到服务器端脚本。文本输入如下:<input type="text" id="regularTrm">

发送命令后,该命令将作为带有类名entry的段落添加到日志中。以下功能由onkeyup事件触发。

function trm_keyUp(e) {
    var ALT_CODE = 18;
    var vKey = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    //console.log(vKey);
    if ( !e.metaKey ) {
        e.preventDefault();
    }
    if (e.keyCode === 38) {
        event.preventDefault();
        if (cmdSt) {
            cmdSt = false;
            currentCommand = $("#regularTrm").val(); //store currently typed command
            var c = $(".entry")[viewCommand]; //select the specific entry
            c = $(c).children()[1]; //select second child
            c = $(c).html(); //get html of selected child
            $("#regularTrm").val(c); //set the value of the input
        }
        else {
            if (viewCommand > 0) {
                var c = $(".entry")[viewCommand];
                c = $(c).children()[1];
                c = $(c).html();
                $("#regularTrm").val(c);
            }
            else {
                var c = $(".entry")[0];
                c = $(c).children()[1];
                c = $(c).html();
                $("#regularTrm").val(c);
            }
        }
        if (viewCommand > -2) {
            --viewCommand; //decend a level (show a more recent command)
        }

    }
    else if (e.keyCode === 40) {
        event.preventDefault();
        if (viewCommand + 2 < $(".entry").length) {
            var c = $(".entry")[viewCommand+2]; //retrieve the specific entry
            c = $(c).children()[1];
            c = $(c).html();
            $("#regularTrm").val(c);
            ++viewCommand;
        }
        else {
            $("#regularTrm").val(currentCommand); //if returned to present, type in the initial command
            cmdSt = true;
        }
    }
}

预期:

  1. 按下向上箭头时,显示较旧的命令

  2. 按下向下箭头时,显示最近的命令(如果用户当前正在预览较旧的命令)

实际结果

  1. 上面的代码会跳过条目

  2. 在某些情况下,将undefined写入输入

  3. 如果清除日志,那根本不好。

0 个答案:

没有答案