Как ограничить ввод определенных символов в инпут JS

Question

Как в простом калькуляторе ограничить ввод символов в инпутe, оставить только цифры и английские буквы?

<body>
    <input id="number1" type="text" value="">
    <hr>
    <input type="text" id="operator">
    <hr>
    <input id="number2" type="text">
    <hr>
    <button onclick="calc()">Результат</button>
    <div id="result"></div>
</body>

</html>

function calc() {
    let result;
    let number1 = Number(document.getElementById("number1").value);
    let number2 = Number(document.getElementById("number2").value);
    let operator = String(document.getElementById("operator").value);
    if (operator == "+") {
        result = number1 + number2;
    } else if (operator == "-") {
        result = number1 - number2;
    } else if (operator == "*") {
        result = number1 * number2;
    } else if (operator == "/") {
        result = number1 / number2;
    } else {
        result = "Ошибка ввода данных";
    }
    document.getElementById('result').innerHTML = result; //вывод результата на страницу
}

Answer 1

Добавьте слушатель на событие input, оно будет срабатывать при вводе каждого символа или change, оно сработает после того, как элемент потеряет фокус:

    <input id="number2" oninput="check_symbols()" type="text">

В check_symbols заменяйте ненужные символы функцией replace:

text = text.replace(/\W/g, '');

Проблема тут в том, что при использовании события input может теряться положение каретки, но это уже совсем другая история...

БЛОГ НА HUSL

Как ограничить ввод определенных символов в инпут JS

Ответы (1 шт):