topic The difference between Firefox and Chromium about keyup event in Discussions

topic The difference between Firefox and Chromium about keyup event in Discussions https://connect.mozilla.org/t5/discussions/the-difference-between-firefox-and-chromium-about-keyup-event/m-p/57578#M20232 <P>This is part of the script code I used in Tampermonkey:</P><P> </P><LI-CODE lang="javascript">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)); } } }</LI-CODE><P> </P><P>When I type some letters with Chinese input method, such as 'hhh' :</P><P>In chromium:</P><P>① When I type 'hhh', then p<SPAN class=""><SPAN class=""><SPAN class="">ress the Enter key and release it immediately, it will input 'hhh' and don't send them. </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">② When I type 'hhh', then press the Enter key </SPAN></SPAN></SPAN><SPAN class=""><SPAN class=""><SPAN class="">and hold</SPAN></SPAN></SPAN><SPAN class=""><SPAN class=""><SPAN class=""> for a while and then release it, it will input 'hhh' and send them. </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">In Firefox:</SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">③ When I type 'hhh', then press the Enter key and release it immediately, it will input 'hhh' and send them. </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">Is this a Firefox bug?</SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">Maybe the reason is there is monitor delays in chromium while Firefox not? </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">Is there any settings in about:config to change ③ to ① ?</SPAN></SPAN></SPAN></P><P>Expected behavior:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="GIF 2024-5-20 20-37-16.gif" style="width: 614px;"><img src="https://connect.mozilla.org/t5/image/serverpage/image-id/6375i6163BB1C90DD01B4/image-size/large/is-moderation-mode/true?v=v2&px=999" role="button" title="GIF 2024-5-20 20-37-16.gif" alt="GIF 2024-5-20 20-37-16.gif" /></span></P><P>Update：</P><P>Finally，I'm aware this is because Firefox <SPAN class=""><SPAN class=""><SPAN class="">responds to every keyup event independently, regardless of whether the keyup event is incidental to processing other tasks or not.</SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">such as this code：</SPAN></SPAN></SPAN></P><P> </P><LI-CODE lang="javascript"><input type="text" id="text"> <script> document.getElementById("text").onkeyup = function(e) { alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which)); }; </script></LI-CODE><P> </P><P>In Firefox, you cannot make this popup disappear by pressing the Enter key and releasing it immediately, while Chromium does allow it.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Misuzu_0-1716238267673.png" style="width: 400px;"><img src="https://connect.mozilla.org/t5/image/serverpage/image-id/6379iC55A6B64246F0E17/image-size/medium/is-moderation-mode/true?v=v2&px=400" role="button" title="Misuzu_0-1716238267673.png" alt="Misuzu_0-1716238267673.png" /></span></P><P><SPAN class=""><SPAN class=""><SPAN class="">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.</SPAN></SPAN></SPAN></P> Mon, 20 May 2024 22:01:42 GMT Misuzu 2024-05-20T22:01:42Z The difference between Firefox and Chromium about keyup event https://connect.mozilla.org/t5/discussions/the-difference-between-firefox-and-chromium-about-keyup-event/m-p/57578#M20232 <P>This is part of the script code I used in Tampermonkey:</P><P> </P><LI-CODE lang="javascript">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)); } } }</LI-CODE><P> </P><P>When I type some letters with Chinese input method, such as 'hhh' :</P><P>In chromium:</P><P>① When I type 'hhh', then p<SPAN class=""><SPAN class=""><SPAN class="">ress the Enter key and release it immediately, it will input 'hhh' and don't send them. </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">② When I type 'hhh', then press the Enter key </SPAN></SPAN></SPAN><SPAN class=""><SPAN class=""><SPAN class="">and hold</SPAN></SPAN></SPAN><SPAN class=""><SPAN class=""><SPAN class=""> for a while and then release it, it will input 'hhh' and send them. </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">In Firefox:</SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">③ When I type 'hhh', then press the Enter key and release it immediately, it will input 'hhh' and send them. </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">Is this a Firefox bug?</SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">Maybe the reason is there is monitor delays in chromium while Firefox not? </SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">Is there any settings in about:config to change ③ to ① ?</SPAN></SPAN></SPAN></P><P>Expected behavior:</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="GIF 2024-5-20 20-37-16.gif" style="width: 614px;"><img src="https://connect.mozilla.org/t5/image/serverpage/image-id/6375i6163BB1C90DD01B4/image-size/large/is-moderation-mode/true?v=v2&px=999" role="button" title="GIF 2024-5-20 20-37-16.gif" alt="GIF 2024-5-20 20-37-16.gif" /></span></P><P>Update：</P><P>Finally，I'm aware this is because Firefox <SPAN class=""><SPAN class=""><SPAN class="">responds to every keyup event independently, regardless of whether the keyup event is incidental to processing other tasks or not.</SPAN></SPAN></SPAN></P><P><SPAN class=""><SPAN class=""><SPAN class="">such as this code：</SPAN></SPAN></SPAN></P><P> </P><LI-CODE lang="javascript"><input type="text" id="text"> <script> document.getElementById("text").onkeyup = function(e) { alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which)); }; </script></LI-CODE><P> </P><P>In Firefox, you cannot make this popup disappear by pressing the Enter key and releasing it immediately, while Chromium does allow it.</P><P><span class="lia-inline-image-display-wrapper lia-image-align-inline" image-alt="Misuzu_0-1716238267673.png" style="width: 400px;"><img src="https://connect.mozilla.org/t5/image/serverpage/image-id/6379iC55A6B64246F0E17/image-size/medium/is-moderation-mode/true?v=v2&px=400" role="button" title="Misuzu_0-1716238267673.png" alt="Misuzu_0-1716238267673.png" /></span></P><P><SPAN class=""><SPAN class=""><SPAN class="">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.</SPAN></SPAN></SPAN></P> Mon, 20 May 2024 22:01:42 GMT https://connect.mozilla.org/t5/discussions/the-difference-between-firefox-and-chromium-about-keyup-event/m-p/57578#M20232 Misuzu 2024-05-20T22:01:42Z