2024年6月18日 星期二

Chrome/Edge的JavaScript onKeyDown(), ondblclice()事件異常

 最近一些在Chrome/Edge運行已久的邏輯被USER反映說功能異常(怪怪),或時好時壞。


輸入時JavaScript keydown(), keyup()事件失效 參考


在<SELECT></SELECT>使用MULTIPLE後雙擊滑鼠ondblclice()會無法觸發帶入所選項。參考


恩恩...不能說邏輯不更新就不會出事,這兩種個案通報當下都覺得不可思議,爬了爬文這兩篇看來最符合預期,留存下~~後續解法也配合文章提供的方法順利排除!!


將onKeyup()至換成下面的方式來處理,原來的地方class增加ordkeyin來做識別,用迴圈主要是幫助跳下一個位置時多個class的繼承

var allInputSelector = ":input:visible:enabled";
let elementsArray = document.querySelectorAll(".ordkeyin");
elementsArray.forEach(function(elem) {
elem.addEventListener('keyup', function (event) {
    if (event.keyCode == 13) {
                       //ENTER提交
mathod_go(event);
} else if ($("#" + this.id).val().length == 8) {
                       //滿8碼跳下一個位置
$(allInputSelector + ":eq(" + ($(allInputSelector).index($(this)) + 3) + ")").focus();
event.preventDefault();
}
    });
});

雙擊問題ondblclick="mathod_go()"改成底下的方式,移除ondblclice="..." 後在class裡面增加dbRigclk做識別,識別碼選用以不重複即可。


document.querySelector(".dbRigclk").addEventListener('dblclick', function (event) {
var clickedOption = event.target;
if (clickedOption.tagName === 'OPTION') {
        clickedOption.selected = true;
}
mathod_go();   
    });