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

Question

[Александр AS]

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

const calc = () => {

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

    };

    calc();

Благодарю за ранее!!!

Comments

[Dima Polos]

Вы понимаете, что в переменной inputNumber лежит после того, как код отработает?

[WapSter]

И как же оно у вас работает? метод .replace работает только со строкой в inputNumber лежит массив элементов.

[Александр AS]

Тимур Турсунбаев, скопируйте и посмотрите :)
просто так бы я не писал

[WapSter]

Александр AS, https://codepen.io/wapster92/pen/aboZyBW и в каком месте оно у вас работает?

[Dima Polos]

Александр AS, Тимур прав) оно никак работать не будет) Если даже inputNumbers привести к строке, то получим [ object NodeList ]. Если хотите сделать код рабочим, могу подсказать)

[WapSter]

Александр AS, https://codepen.io/wapster92/pen/NWKrvbZ держи это почти рабочий код, там все немного посложнее, но принцип вот такой, того что ты пытался сделать

[Александр AS]

Dima Polos, дело в том что код может и не рабочий код, но при вводе разницу понимает. Числа проходят, а буквы нет)
Но консоль красная))
Если можете помочь, то пожалуйста!
Хотя бы объясните с чего начать и чем закончить))

[WapSter]

Александр AS, буквы не проходят не потому, что у вас код работает, а потому что <input type="number"> сам по себе не пропускает буквы.

[Александр AS]

Тимур Турсунбаев, понял. Спасибо!

Answer 1

[Dima Polos]

Хорошо, объясню.

const inputNumbers = document.querySelectorAll('input');

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

Comments

[Александр AS]

Больше спасибо! Очень сильно помогли!!!
Вот так реализовал, всё работает!

const inputsCalc = document.querySelectorAll('.calc-block > input');

        inputsCalc.forEach((elem) => {
            elem.addEventListener('keyup', (event) => {
                let target = event.target;
                target.value = target.value.replace(/[^\d,]/g, '');
            });
        });

[Dima Polos]

Александр AS, поменяйте keyup на input, будет работать лучше;)

[Dima Polos]

Александр AS, чтоб понять почему, просто скопируйте текст и не набирайте с клавы, а вставьте из буфера) keyup не сработает

[Dima Polos]

Александр AS, был рад=) успехов!

[Александр AS]

Dima Polos, ок, спасибо ещё раз))

Answer 2

[Stockholm Syndrome]

<input type="number">

Comments

[Александр AS]

type="number" указан