Annyira haladtam a témában, hogy valamiért a keyup-ot nem szereti, viszont a keydown-nal és a keypress-szel nincs baja. (Fórumbejegyzésekben találtam ezt az infót, kipróbáltam, és valóban.)
Viszont azért használtam keyup-ot, mert az esemény után figyeltem, hogy változik-e a keresőmező tartalma (nem-e marad üres), és ha karatert ír be a user (tehát nem csak belekattint, és nyom egy shift-et), akkor megjelenik a mező törlése gomb.
var elementMainSearch = document.getElementById("mainSearch");
elementMainSearch.addEventListener("keyup", function(event) {
var elementMainSearchValue = elementMainSearch.elements[0].value;
console.log('elementMainSearchValue: ' + elementMainSearchValue);
if (elementMainSearchValue != ""){
//törlés gomb megjelenítése
}
}
Így ha beírtam, hogy q, akkor a konzolba kiírta, hogy elementMainSearchValue: q, és megjelent a törlés gomb.
Viszont így, hogy Safarival ez valamiért nem működik, muszáj vagyok keydown-ra vagy keypress-re cserélni a keyup-ot.
Ezekkel viszont az a baj, hogy az eventjük után még nem változik a keresőmező tartalma.
Tehát a fenti kód keydown-nal vagy keypress-szel ezeket az eredményeket adja:
q --> elementMainSearchValue:
qw --> elementMainSearchValue: q
qwe --> elementMainSearchValue: qw
stb.
Így ha csak 1 karaktert ír be a user a keresőmezőbe, nem lesz aktív a gomb, mert kell mellé még egy leütés.
Hogyan tudom szerintetek ezt megoldani?
Akár más struktúrával is. (Elindultam a beírt keycode-ok vizsgálatával (Ctrl - 17, Shift - 16, Tab - 9, Enter/Return - 13, Option - 18, Command - 91 stb.), de ott túl sokat kell lekezelni (minden gombot, ami szám vagy betű), az a megoldás nem tetszik.)
UPD.:
Az input event lesz a jó, úgy látom.