cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

The difference between Firefox and Chromium about keyup event

Misuzu
Making moves

This is part of the script code I used in Tampermonkey:

 

function addQuickChatBar(){
    let quickChatBarHtml = `
        <div class="quick-chat-bar-wrapper ele-hide">
            <div class="quick-chat-input-wrapper">
                <input id="quick-chat-input" type="text" autocomplete="off" placeholder="请输入弹幕,Enter键发送"/>
            </div>
            <div class="quick-chat-input-count">0/30</div>
            <div class="quick-chat-send-btn" id="quick-chat-send-btn">发送(enter)</div>
        </div>
    `;
    $("#videoContainer").append(quickChatBarHtml);
    let wrapper = $(".quick-chat-bar-wrapper");
    let input = $("#quick-chat-input");
    $("#videoContainer").attr("tabindex","999").focus().keyup(e=>{
        let isFullPage = $(".player-narrowpage").size() > 0 || $(".player-narrowscreen").size() > 0;
        if(e.keyCode === 13){
            if(!wrapper.hasClass("ele-hide")){
                wrapper.toggleClass("ele-hide");
            } else if(isFullPage){
                wrapper.toggleClass("ele-hide");
                if(!wrapper.hasClass("ele-hide")){
                    input.focus();
                }
            }
            e.stopPropagation();
        }
    });

    let tooFast = false;
    let countInput = true;
    input.keyup(e=>{
        if(e.keyCode === 13){
            let text = input.val();
            if(text && text.length > 0){
                if(!tooFast){
                    let sendTimeout = chat(text);
                    if(sendTimeout === 0){
                        wrapper.addClass("ele-hide");
                        $("#videoContainer").focus();
                        input.val("");
                        setInputCount(0);
                    } else {
                        tooFast = true;
                        $("#quick-chat-send-btn").toggleClass("div-disabled");
                        let disableTimer = setInterval(()=>{
                            if(sendTimeout > 0){
                                $("#quick-chat-send-btn").text(`倒计时:${sendTimeout}`);
                                sendTimeout--;
                            } else {
                                $("#quick-chat-send-btn").text("发送(enter)").toggleClass("div-disabled");
                                clearInterval(disableTimer);
                                tooFast = false;
                            }
                        }, 1000);
                    }
                }
            } else {
                wrapper.toggleClass("ele-hide");
                $("#videoContainer").focus();
            }
            e.stopPropagation();
        }
    }).on('compositionend', e => {
        checkInputCount();
        setInputCount(input.val().length);
        countInput = true;
    }).on('input', e => {
        if(countInput) {
            checkInputCount();
            setInputCount(input.val().length);
        }
    }).on('compositionstart', e => {
        countInput = false;
    })

    let setInputCount = cnt => $(".quick-chat-input-count").text(`${cnt}/30`);
    let checkInputCount = ()=>{
        let text = input.val();
        if(text.length >= 30) {
            input.val(text.substring(0, 30));
        }
    }
}

 

When I type some letters with Chinese input method, such as 'hhh' :

In chromium:

① When I type 'hhh', then press the Enter key and release it immediately, it will input 'hhh' and don't send them.

② When I type 'hhh', then press the Enter key and hold for a while and then release it, it will input 'hhh' and send them.

In Firefox:

③ When I type 'hhh', then press the Enter key and release it immediately, it will input 'hhh' and send them.

Is this a Firefox bug?

Maybe the reason is there is monitor delays in chromium while Firefox not?

Is there any settings in about:config to change ③ to ① ?

Expected behavior:

GIF 2024-5-20 20-37-16.gif

Update:

Finally,I'm aware this is because Firefox responds to every keyup event independently, regardless of whether the keyup event is incidental to processing other tasks or not.

such as this code:

 

<input type="text" id="text">
<script>
    document.getElementById("text").onkeyup = function(e) {
        alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));
    };
</script>

 

In Firefox, you cannot make this popup disappear by pressing the Enter key and releasing it immediately, while Chromium does allow it.

Misuzu_0-1716238267673.png

In this case, the keyup event of the Enter key is incidental to compositionend, but Firefox still executes the keyup function regardless of that, while Chromium behaves as expected.

0 REPLIES 0