javascript - JS退格按键事件有时触发，有时不触发

Question

我有这段代码:

container.unbind('keypress').bind('keypress',function (e) {

            var code = e.which,
                charac = String.fromCharCode(code),
                totalChar = $(this).text().replace(/\s+/g, ''),
                diff,
                previousChar = publisher.typeHistory.length > 0 ? publisher.typeHistory[publisher.typeHistory.length-1]:''
                previousCharCode = previousChar.charCodeAt(0);

            if(e.keyCode === undefined){ // backspace
                getCharacterDiff();
                console.log(totalChar.length-1);
                if(totalChar.length-1 === 0){
                    publisher.typeHistory = [];
                }
            }  

            console.log(previousChar);
            if(isCharacterKeyPress(code)){
                if (charac.toUpperCase() != charac.toLowerCase() ) { // Is a char or space


                    if(charac === charac.toUpperCase()){ // Is a char upper ?

                        if(previousChar === ' '){
                            console.log('upper + previous == space ', publisher.typeHistory);
                        }else {
                            publisher.typeHistory = [];
                        }

                        push = true;
                    }
                    else if (charac === charac.toLowerCase()){
                        if(previousCharCode === 32){
                            publisher.typeHistory = [];

                        }
                        if(hasUpperCase(publisher.typeHistory.join(''))){
                            push = true;
                        }
                        else {
                            push = false;
                        }

                    }
                    else {
                        push = false;
                    }


                }
                else if (code === 32){
                    console.log('space');
                    console.log(previousCharCode);
                    if (previousCharCode === 32){
                        push = false;
                        publisher.typeHistory = [];
                    }

                    // else if(previousChar === 32) { // is the spacebar ?
                    //  console.log(previousChar);

                    // }
                }
                else { // = it's a number / , / ., etc..
                        console.log('not chara or space');
                        push = false;
                        publisher.typeHistory = [];



                }


                if (push) {
                    publisher.typeHistory.push(charac);
                }

            }

            console.log(publisher.typeHistory);
            previousTotal = publisher.typeHistory.join('');


            if (publisher.typeHistory.length > 2) {
                exp = publisher.typeHistory.join('');
                publisher.getResults(service,type,exp);
            }
            else {
                if(publisher.typeHistory.length === 0){
                    publisher.typeHistory = [];

                }
                publisher.hideResults();
            }

    });

通过此功能，我可以处理在具有 contenteditable=true 的元素中键入哪些键，然后将其发送到向 PHP 脚本发出请求的方法。

这里，container 可以是任何 contenteditable=true 的元素。

问题是:我使用 e.keyCode === undefined 来检查用户是否键入退格键，以便我可以更新请求。但是 e.keyCode === undefined 仅适用于单个元素，不适用于其他元素(在另一个元素上，不会触发按键事件)。

所以我不知道这是从哪里来的:

• 我知道按键事件无法检测到退格键按下(但是，在这种情况下，使用此代码，它可以检测到)
• 在 HTML/JS 中，可以作为容器的任何元素之间没有区别
• 我无法使用 keyup/keydown，因为它不区分大小写

我错过了什么？

Answer 1

来自 MDN keypress event:

The keypress event is fired when a key is pressed down and that key normally produces a character value

因此，您必须对某些键使用 keyup 或 keydown 事件，例如转义键或退格键，因为它们不会产生字符。

退格键的键码是 8，因此您的代码可能如下所示:

container.unbind('keyup').bind('keyup',function (e) {

    ...

    if(e.keyCode === 8){ // backspace
        getCharacterDiff();
        console.log(totalChar.length-1);
        if(totalChar.length-1 === 0){
            publisher.typeHistory = [];
        }
    }  

    ...

});