如何記錄按鍵事件的時間？

Question

我正在嘗試構建一個小腳本，在回調時顯示，當我按下鍵q然后一秒鍾后我按下w它應該顯示q和w顯然，但是當我按下q然后w不是同時，在不到一秒鍾的時間內，它應該顯示其他單個字符，例如： x ，這是我目前卡在JsFIDDLE或我的完整代碼的地方。

<script type="text/javascript">
function check(e){
        var text = e.keyCode ? e.keyCode : e.charCode;
                 
         switch(text){
         case 81:
            text = 'q';
            break;
        case 87:
            text = 'w';
            break; 
 }
    
    if(text == 8){
        
        var str = document.getElementById("out").innerHTML;
        var foo = str.substring(0, str.length -1);
        document.getElementById("out").innerHTML = foo; 
    }else {
        document.getElementById("out").innerHTML += text;
    }

    }
        
</script>
   <input  type='text'  onkeyup='check(event);' id='in' />
<div id='out' ></div>

我是 JavaScript 新手，我不知道是什么讓你記錄一個按鍵，然后等待一秒鍾內是否存在另一個按鍵。 我也嘗試過setInterval()函數，但它僅按給定的時間量執行函數。

Answer 1

這里是這樣的：如果 q 被按下，你有一秒鍾的時間得到一個'w'，否則你會得到一個'x'。 這是你想要的嗎？ （試圖使它盡可能容易閱讀，最好你會重構一點:)

var openToW = false;

function check(e){
    var text = e.keyCode ? e.keyCode : e.charCode;

    if(text==81){
        openToW=true;
        document.getElementById("out").innerHTML='q';
        setInterval(lock,1000);
    }
    if(text==87){
        if(!openToW){
            document.getElementById("out").innerHTML = 'x';
            return;
        }
        else{
           document.getElementById("out").innerHTML='w';
        }
    }
}

function lock(){
    openToW=false;
}

Answer 2

我認為這是你需要的：

var timer = new Date(),
    previousChar;

function check (e) {
    var foo,
        text = e.keyCode ? e.keyCode : e.charCode,
        out = document.getElementById('out'),
        str = out.innerHTML;
    switch (text) {
        case 81: text = 'q'; break;
        case 87: text = 'w'; break;
    }
    if (new Date() - timer < 1000 && text === 'w' && previousChar === 'q') {
        text = 'x';
        out.innerHTML = str.substring(0, str.length - 1);
    }   
    if (text === 8) {
        foo = str.substring(0, str.length - 1);
        out.innerHTML = foo; 
    } else {
        out.innerHTML += text;
    }
    previousChar = text;    
    timer = new Date();
    return;
}

jsFiddle的現場演示。

---

編輯

由於您已通過評論添加了更多要求，因此這里是該任務的編輯代碼：

var timer = new Date(),
    keyCombinations = {
        ae: 'ä',
        oe: 'ö',
            qw: 'x'
    };

function check(e){
    var text, str, previousKeys,
        key = e.keyCode || e.charCode,
        out = document.getElementById('out');

    text = String.fromCharCode(key);
    str = out.innerHTML + text;
    previousKeys = str.substring(str.length - 2, str.length);
    if (new Date() - timer < 1000) {
        if (previousKeys in keyCombinations) {
            str = str.substring(0, str.length - 2) + keyCombinations[previousKeys];
        }
    }
    out.innerHTML = str;
    timer = new Date();
    return;
}

請注意，此代碼用於onkeypress事件。 從鍵碼創建字符時更可靠。 您可以在onkeyup處理函數中為特殊鍵（如退格鍵）分配單獨的事件處理。

這不是一個完美的代碼，但它給了你一個想法，如何實現這個任務。 它使用對象文字來存儲所有組合鍵及其替換。 這樣，您根本不需要編寫任何循環。

jsFiddle的一個活生生的例子。