Jak zavolat funkci po vyplnění přihlašovacích údajů prohlížečem?

Dobrý den,

Nastavil jsem na webu, aby tlačítko pro přihlášení zůstalo zakázáno do té doby, než nejsou vyplněny oba údaje a email má platný formát

function updateLoginButtonState() {

        const email = usernameInput.value.trim();
        const password = passwordInput.value.trim();
 
        const hasEmail = email.length > 0;
        const hasPassword = password.length > 0;
        const emailValid = isEmailSyntaxValid(email);
 
        loginBtn.disabled = !(hasEmail && hasPassword && emailValid);
 
        // NEXT CODE
}

Volám při jakékoliv změně hesla nebo emailu a funguje to naprosto správně

Problém nastává, když to má uložené prohlížeč a automaticky to doplní při načtení, při čemž tlačítko zůstane stále nepovoleno.

I když stačí pouze kliknout (klidně i přímo na tlačítko), tak se okamžitě povolí, i přesto je to otravné.

ChatGPT mně doporučil na konec DOMContentLoaded dopsat

let loginCheckCount = 0;

const loginPostLoadCheck = setInterval(() => {
    updateLoginButtonState();

    loginCheckCount++;

    // max ~2 sekundy (20 × 100 ms)
    if (loginCheckCount >= 20) {
        clearInterval(loginPostLoadCheck);
    }
}, 100);

To sice funguje správně, pustí se to v daných intervalech v daném počtu, ale nepomůže to. I když jsou údaje vyplněné, tlačítko je stále deaktivované.

Nevíte, prosím Vás, jak to opravit?

Děkuji

Předmět	Autor	Datum
Prohlížeče nevyvolávají žádné události (input, change, keyup…), když automaticky doplní uložené přih… poslední alicek 24.01.2026 00:27	alicek	24.01.2026 00:27

Prohlížeče nevyvolávají žádné události (input, change, keyup…), když automaticky doplní uložené přihlašovací údaje. Proto se tvoje funkce updateLoginButtonState() nespustí.

Nejjednodušší a spolehlivé řešení je spustit kontrolu po načtení stránky pomocí requestAnimationFrame() nebo setTimeout(), protože autofill proběhne až po vykreslení DOMu.

Zkus například: document.addEventListener("DOMContentLoaded", () => {
// Počkej, až prohlížeč doplní autofill
requestAnimationFrame(() => {
requestAnimationFrame(() => {
updateLoginButtonState();
});
});
});

Nebo jednoduše:

window.addEventListener("load", () => {
updateLoginButtonState();
});

Událost load se spouští později než DOMContentLoaded, takže už většinou obsahuje autofill hodnoty.

Pokud používáš <input autocomplete="on">, můžeš také poslouchat událost:

usernameInput.addEventListener("change", updateLoginButtonState);
passwordInput.addEventListener("change", updateLoginButtonState);

Ale nejspolehlivější je opravdu kontrola po load.