Skocz do zawartości
  • 0

Liczenie ilości znaków w input


xNeQx
 Udostępnij

Pytanie

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>

 

Odnośnik do komentarza
Udostępnij na innych stronach

2 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

  • 0

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
    })
})

 

Odnośnik do komentarza
Udostępnij na innych stronach

  • 0
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

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający forum Liczenie ilości znaków w input   0 użytkowników
    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...