Question

我正在制作一个应该支持下标的自定义输入字段。当用户按下向下箭头+一个数字时，该数字应该是下标。我将onKeyDown和onKeyUp事件侦听器附加到内容可编辑段落。不幸的是，当用户按下数字时会调用onKeyUp，这会导致数字加两次（一次在下标中，一次正常）。我该如何解决这个问题？

function keyDown(event) {
    var code = event.keyCode;
    if (code === 40) {
        option = 0;
    }
}

function keyUp(event) {
    var code = event.keyCode;
    if (code === 40 || code === 38) {
        option = -1;
    }
    console.log("release");
}

onKeyPressed不是一个选项，因为它无法识别所有浏览器中的箭头键。是否有本机解决方案（没有jQuery）？

Answer 1

我通常做的是将keyCodes推送到keyDown上的数组和.splice()上keyUp。

现在你要做的就是检查（可能是针对预先定义的地图）你所希望的关键状态是否可用于数组。

Answer 2

只要您的文本字段具有焦点，除了您的keyup或keydown侦听器添加的任何数字键之外，您添加的任何数字键都将添加到其中。如果您按下的键是向下键并且在键盘事件触发后再次添加焦点，也许您应该从keydown上的文本字段中取走焦点。

/* Keep track of the down key. */
var down=false;
/* Get the input text field. */
var input=document.getElementById("input");
input.addEventListener("keydown",keyDown);
input.addEventListener("keyup",keyUp);

/* Give focus to input. I'm not sure if this is the right way to do it, I haven't tested this code, but I know there's a way to give focus to elements and it sort of looks like this. */
input.focus();

function keyDown(event_){
    switch(event_.keyCode){
        case 40:
            /* Once again, not sure how to unfocus, but I know you can. */
            input.unfocus();
            down=true;
        break;
    }
}

function keyUp(event_){
    switch(event_.keyCode){
        case 40:
            /* Give focus back to input after the keyup event has fired. */
            input.focus();
            down=false;
        break;
    }
    if (down){
        input.value+=//The subscript version of whatever key you pressed.
    }
}

再一次，我想说这段代码还没有经过测试，我不确定focus（）和unfocus（）是不是真正的方法，但你明白了。您希望在按下向下键时暂时停止文本字段接受输入，这样您就可以添加自己的特殊值而不用默认响应更新它的内容，然后在文本字段后将焦点返回到文本字段。向下键不再使用。

按下第二个按钮时调用onKeyUp

2 个答案: