javascript - keydown 事件仅在按下任何其他键后才起作用

Question

我正在开发一个 Mozilla 插件，它将左侧的数字键替换为 Shift + 等效键。例如，如果您按 1，它将被替换为 '!'自动(特别适用于在线编译器)。这是代码

document.activeElement.addEventListener("keydown",keyc);
var ch = [')','!','@','#','$','%','^','&','*','('];
function keyc(event)
{
    var x = document.activeElement.value;
    if( event.keyCode >= 48 && event.keyCode <= 57)
        {
            event.preventDefault();

            x= x + ch[event.keyCode -48];
        }
    document.activeElement.value = x ;
}

这工作正常，但只有在数字键后按下另一个键时才会替换字符。谁能指出为什么会发生这种情况......提前致谢。

Answer 1

这是因为您使用了 keydown 事件。它在输入内容输入字段之前触发。如果您改为使用 keyup 事件，当输入实际输入到输入字段时，它将触发。

更新:

好的，我用以下更正更新了我的答案。我通过阻止 keydown 事件的默认行为来阻止输入。我将字符插入到插入符号位置，而不是将其附加到文本区域的末尾。

工作 fiddle :http://jsfiddle.net/e4VaY/6/

document.activeElement.addEventListener("keydown",blockInput);
document.activeElement.addEventListener("keyup",keyc);

var ch = [')','!','@','#','$','%','^','&','*','('];
function keyc(event)
{
    var txtArea = document.activeElement;
    var x = txtArea.value;
    if( event.keyCode >= 48 && event.keyCode <= 57)
        {
            insertAtCaret(txtArea, ch[event.keyCode -48]);
        }
}

function blockInput(event){
    if( event.keyCode >= 48 && event.keyCode <= 57)
    {
        event.preventDefault();   
    }
}

function insertAtCaret(txtarea,text) {
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}