如何记录按键事件的时间？

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

我认为这是你需要的：

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 的现场演示。

---

编辑

由于您通过 cmets 添加了更多要求，因此这里是该任务的编辑代码：

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 处理函数中为特殊键分配单独的事件处理，例如 backspace。

这不是一个完美的代码，但它给了你一个想法，如何实现这个任务。它使用对象文字来存储所有组合键及其替换。这样你根本不需要编写任何循环。

jsFiddle 上的一个活生生的例子。

Answer 2

这里是：如果按下 q，你有 1 秒钟的时间得到一个 '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;
}