Как удалить пробелы и буквы с input?

Question

[dimonfreeman]

Подскажите как удалить все пробелы и буквы на лету с input с помощью чистого js .

Comments

[Сергей Сергей]

input type number

Answer 1

[Александр]

input.addEventListener('input', event => {
    const element = event.target;
    const currentValue = element.value;
    const preparedValue = currentValue.replace(/\D/g, '');
    const start = element.selectionStart;
    const end = element.selectionEnd;
    
    if (preparedValue !== currentValue) {
        element.value = preparedValue;
        element.dispatchEvent(new Event('change', { bubbles: true }));
    
        if (event.inputType === 'insertText') {
            const offset = event.data.length;

            element.setSelectionRange(start - offset, end - offset);
        }
    }
});

Для Vue https://codesandbox.io/s/qna-q1013532-zf2xk

Comments

[Stalker_RED]

при попытке ввода неправильного символа курсор будет перемещаться в конец строки. Не лучше ли фильтровать при вводе?

[dimonfreeman]

Александр ,
работает все ок..
только теперь появился блин баг.
внедряю в vue, при вводе = ок фильтрует левое не пропускает. а если начать копипастом вставить = не видно левого, но если в другом поле кликнуть , то в текущем появляеться все то что должно удалить с строки.

[Александр]

Stalker_RED, Вроде исправил.

[Александр]

dimonfreeman, Проверьте ещё раз.

[dimonfreeman]

Александр, теперь если кликнуть в другом месте = ок, только начинаешь вводить в другом месте, подставляеться старое значение.
Пример
вставляю в телефон = asdasd099 999 99 99 41231
показывает 099999999941231

кликаю на другое поле - ок.
начинаю вводить в другом поле = и появляеться asdasd099 999 99 99 41231

[Александр]

dimonfreeman, Ещё раз обновил, но про Vue в вопросе не было сказано, поэтому могу написать не так "красиво".

[dimonfreeman]

Александр, через метод не могу прокинуть, так как не могу для данного инпута кинуть метод...
перебираю все поля.

[Александр]

dimonfreeman, Код тогда показывайте.

[Александр]

dimonfreeman, и в чем проблема заменить v-model на :value и @input.

[dimonfreeman]

Александр, спасибо. дальше решил сам.
значение preparedValue отдаю в форму и все корректно.