Liczenie ilości znaków w input

[xNeQx]

Witam. Dostałem ostatnio zadanko, że po wpisaniu 12 znaków lub kliknięciu klawisza enter wyświetlić ma się alert('ok'). Mam problem z tym, że nie umiem wywołać funkcji bez buttona, a potrzebuje żeby ten skrypt wyświetlał alert 'ok' od razu po wpisaniu 12 znaków.  

Mój kod:

<script language="javascript">

    



    function znaki() {

        var name = document.getElementById('TextBox1').value.length;

        if (name == 12) {

            

            alert('ok');

        }

    }

    function klawisz(e) {

        e = (e) ? e : event;

        klawisz = (e.which) ? e.which : e.keyCode;

        if (klawisz == 13) {

            alert("ok - enter");

        }

    }

    document.onkeydown = klawisz;

    button1.onclick.onload = znaki;



     

</script>

 

[Jakub]

Dobrą praktyką jest sprawdzenie pierw czy DOM został załadowany, żebyśmy wiedzieli czy mamy na czym pracować. Dalej pobieramy sobie nasz input np. poprzez getElementById. Zamiast użycia wydarzenia keyDown zalecałbym keyUp. O ile to pierwsze w naszym wypadku zadziała za 13 naciśnięciem, tak to drugie zadziała prawidłowo przy 12. Wynika to z faktu, że w momencie pierwszego naciśnięcia input jest pusty, więc jego długość wynosi 0.  Całe zadanie zamykamy w wydarzeniu keyUp, to w nim sprawdzamy zarówno długość ciągu, jak i to jaki przycisk został naciśnięty. Przykładowe rozwiązanie:

document.addEventListener('DOMContentLoaded', function(){   //sprawdzamy czy DOM się załadował
    var ourInput = document.getElementById('ourInput')      //pobieramy nasz input
    document.addEventListener('keyup', function(e){         //nasłuchujemy wydarzenia 'keyup'
        if(ourInput.value.length !== 12 && e.keyCode != 13) //sprawdzamy czy ilość znaków jest różna od 12 i klawisz to nie enter
            return                                          //jeśli warunek jest spełniony nic nie robimy

        alert('ok')                                         //jeśli jest powyżej 12 znaków lub został naciśnięty enter wyświetlamy komunikat
    })
})

 

[xNeQx]

4 godziny temu, Jakub napisał:

Dobrą praktyką jest sprawdzenie pierw czy DOM został załadowany, żebyśmy wiedzieli czy mamy na czym pracować. Dalej pobieramy sobie nasz input np. poprzez getElementById. Zamiast użycia wydarzenia keyDown zalecałbym keyUp. O ile to pierwsze w naszym wypadku zadziała za 13 naciśnięciem, tak to drugie zadziała prawidłowo przy 12. Wynika to z faktu, że w momencie pierwszego naciśnięcia input jest pusty, więc jego długość wynosi 0.  Całe zadanie zamykamy w wydarzeniu keyUp, to w nim sprawdzamy zarówno długość ciągu, jak i to jaki przycisk został naciśnięty. Przykładowe rozwiązanie:

document.addEventListener('DOMContentLoaded', function(){   //sprawdzamy czy DOM się załadował
    var ourInput = document.getElementById('ourInput')      //pobieramy nasz input
    document.addEventListener('keyup', function(e){         //nasłuchujemy wydarzenia 'keyup'
        if(ourInput.value.length !== 12 && e.keyCode != 13) //sprawdzamy czy ilość znaków jest różna od 12 i klawisz to nie enter
            return                                          //jeśli warunek jest spełniony nic nie robimy

        alert('ok')                                         //jeśli jest powyżej 12 znaków lub został naciśnięty enter wyświetlamy komunikat
    })
})

 

Dzięki za wytłumaczenie i działa ;D