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:
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.
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.
