@as_viper
Начинающий веб-разработчик

Как можно использовать querySelectorAll вместе с replace?

Добрый день всем!
Скажите пожалуйста, как можно использовать querySelectorAll вместе с replace?
В моём случае нужно во всех input разрешить ввод только цифр.
Я это сделал и всё работает, НО в консоли выдает ошибку inputNumber.replace is not a function .
Что не так делаю?

const calc = () => {

        const inputNumber = document.querySelectorAll('input');
        const inputNumberCalc = inputNumber.replace(/\w/gi);

    };

    calc();


Благодарю за ранее!!!
  • Вопрос задан
  • 117 просмотров
Решения вопроса 1
dimovich85
@dimovich85 Куратор тега JavaScript
https://u-academy.net/
Хорошо, объясню.
const inputNumbers = document.querySelectorAll('input');

Получает список инпутов, далее надо их все перебрать, для этого нужно организовать, например, цикл. У каждого инпута много есть свойств и методов, так как это объект DOM, и чтобы получить введенные данные надо обратиться к свойству value. В результате получим строку, где будет введенные данные. Теперь можно работать с этими данными и применять к ним replace. Но, данные в инпуте от этого не изменяться. То, что вернет метод replace надо присвоить в этот самый инпут, из которого он был взят.
Остается одно НО! Если написать код как я объяснил, но в таком виде, как у Вас, то инпуты очистятся ровно один раз, при вызове функции. Чтобы код работал всегда, когда человек что-то вводит в инпут нужно повесить на инпуты обработку событий: change - человек сможет ввести, что угодно, но как только он уберет фокус с поля ввода отработает функция и все ненужное вырежет; input - функция будет вырезать как только человек что-то будет вводить, при каждом вводе, на каждом символе тут же будет вырезать. Как по мне второй вариант самое то. При таком раскладе, можно просто функцию-обработчик повесить на инпуты, и внутри нее работать с target события и без цикла. Правда циклом надо пройтись, чтобы повесить обработку событий на все инпуты.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@StockholmSyndrome
<input type="number">
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы