Podawanie godziny | html | javascript

pytanie zadane 13 maja 2020 w JavaScript przez primole Obywatel (1,130 p.)

Witam, mam inputa w którym chciałbym otrzymać godzinę przez użytkownika, najlepiej gdyby był w formacie | 24:60 |
Tzn użytkownik nie może wpisać więcej niż 24 w pierwszym członie, ani więcej niz 60 w drugim członie, jak rozwiązać ten problem? :)

3 odpowiedzi

odpowiedź 13 maja 2020 przez Velta Maniak (52,370 p.)
wybrane 13 maja 2020 przez primole

Najlepsza

komentarz 13 maja 2020 przez primole Obywatel (1,130 p.)

I o to chodziło :D Dzięki

odpowiedź 13 maja 2020 przez DawidK Nałogowiec (37,910 p.)

poczytaj o input number i atrybutach min , max

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

komentarz 13 maja 2020 przez primole Obywatel (1,130 p.)

Użytkownik może wpisać w inputa ile chce, dopiero pózniej jest to blokowane. W input i typie number nie można dać znaków jak ":" lub "-".

komentarz 13 maja 2020 przez DawidK Nałogowiec (37,910 p.)

Niby można pobierać wartość - sprawdzać czy pierwszy znak jest 0-2 jeżeli nie kasować wartość, jeżeli tak to czy drugi znak jest w przedziale 0-9 jeżeli nie to go kasować, jeżeli tak to sprawdzać czy 3 znak to " : "..... ale dużo zagnieżdżeń się z tego zrobi

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Godzina</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
    <input id='time' type='text'>

    <script>
        const timeInput = document.querySelector('#time');

        checkTime = (time) => {
            if(parseInt(time.charAt(0)) >= 0 &&  parseInt(time.charAt(0)) <=2){
                if(parseInt(time.charAt(0)) >= 0 &&  parseInt(time.charAt(1)) <=9){
                    console.log('pass');
                }
                else {
                    timeInput.value = timeInput.value.slice(0,1)
                }
            } else {
                timeInput.value = '';
            }
        }

        timeInput.addEventListener('keyup',(event) => checkTime(event.target.value))
    </script>
</body>
</html>