JavaScript jak zablokować w inpucie tekstowym wpisywanie stringów

pytanie zadane 9 października 2019 w JavaScript przez Tomyslav Nowicjusz (220 p.)

Witam. Stworzyłem prosty program do zliczania punktów życia - dodawanie ich oraz odejmowanie.

Jak zablokować wpisywanie stringów w input textowym ?. Chciałbym aby można było wpisać tylko liczby/cyfry, aby nie dało się wpisać liter ani innych znaków. Po wpisaniu liter (jakiegoś stringu) lub jakiegoś znaku ma pojawić się np:

alert('Wpisz tylko liczbę');

Proszę o pomoc.

Oto kod który stworzyłem do tej pory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    input
    {
        width: 50px;
    }

    button.reset
    {
        background-color: yellow;
    }

    button.dodawanie
    {
        background-color: green;
    }

    button
    {
        background-color: red;
    }

    
    </style>
</head>
<body>
    
<input type="text">
<button class="dodawanie">+</button>
<button class="minusowanie">-</button>
<button class="reset">Reset</button>
<h1></h1>

<script>
    const input = document.querySelector('input');
    const wynik = document.querySelector('h1');
    const btn = document.querySelector('.minusowanie');
    const reset = document.querySelector('.reset');
    const dodaj = document.querySelector('.dodawanie');
    
    let zycie = 20;

    wynik.textContent = zycie;

    
    dodaj.addEventListener('click', ()=>
    {       
        zycie += Number(input.value);
        wynik.textContent = zycie;
        input.value = '';
        
        if (zycie > 20) wynik.style.color = 'green'
        if (zycie <= 20) wynik.style.color = 'black'
        
    })
    
    btn.addEventListener('click', ()=>
    {
        zycie -= Number(input.value);
        wynik.textContent = zycie;
        input.value = '';
        if (zycie <= 20) wynik.style.color = 'black'
        if (zycie <= 0)
        {
            wynik.style.color = 'red'
            alert('Przegraleś!');
        }       
    })

    reset.addEventListener('click', ()=>
    {
        zycie = 20;
        wynik.textContent = zycie;
        wynik.style.color = 'black'
    })


</script>

</body>
</html>

1	komentarz 9 października 2019 przez Velta Maniak (52,010 p.) Jak zablokować wpisywanie stringów w input textowym ? Po co? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

komentarz 10 października 2019 przez Tomyslav Nowicjusz (220 p.)

dziekuję za odpowiedź

2 odpowiedzi

odpowiedź 9 października 2019 przez BT101 Stary wyjadacz (12,540 p.)
edycja 10 października 2019 przez BT101

<input type="number" min="0" max="100">

Tomek Sochacki zwrócił uwagę, na te znaki, kropki, kreski... Możesz sprawdzić czy jak sparsujesz do inta obecnie wciskany guzik to czy nie będzie to NaN. Bo NaN będzie dla każdej literki, kropki, kreski.. I jeśli jest NaN to powstrzymać od wpisania...

<input type="text" id="inp">

document.getElementById('inp').addEventListener('keydown', e => {
  if(isNaN(parseInt(e.key))) e.preventDefault();
})

Nie testowałem tego rozwiązania ale powinno działać

komentarz 9 października 2019 przez Tomek Sochacki Ekspert (227,510 p.)

tylko liczby/cyfry, aby nie dało się wpisać liter ani innych znaków

Twoje rozwiązanie nie spełnia tych kryteriów, dopuszczasz wpisanie np. "12+1", znaku myślika, kropki (choć tu pytanie czy mają to być liczby integer czy float).