Как позволить набирать input только числа и «+»?

Question

[Max Shteklya]

Есть код позволяющий вводить только числа в инпут, как сделать так что бы можно было вводить еще и знак "+". Вот код:

$('input').on('input', (e) => { e.target.value = e.target.value.replace(/\D/g, '')})

Answer 1

[0xD34F]

Замените текущее регулярное выражение на /[^+\d]/g.

Ну а вообще, как я понял, вы хотите реализовать ввод телефона. Рекомендую посмотреть в сторону таких вещей как inputmask, например.

Answer 2

[BarryHAllen]

<input type="text" oninput="replacer(this)">

function replacer(el) {
    el.value = el.value.replace(/[^0-9+]/g, ''); 
}

Answer 3

[Kudis]

Используйте плагин inputmask от jQuery

$(function () {
   $(".js-form__input--tel").inputmask("mask", {"mask": "[phone]"});
});

если хотите, чтобы формат был "российский мобильный" +7(9xx)xxx-xxxx (где x-любая цифра)
то jQuery inputmask позволит сделать маску так:

$(function () {
    $('.js-form__input--tel').inputmask({
        mask: "+7 (X99) 999-9999",
        definitions: {
            'X': {
                validator: "9",
                placeholder: "9"
            }
        }
    });
});

Теперь пользователь может вводить 89123456789 или [phone] или 79123456789
Вы получите весь телефон в нужном формате

Answer 4

[Denis Melnikov]

А почему не использовать патерн на инпуте ?

Comments

[Kudis]

Потому-что он, грубо говоря, нигде не работает, кроме айфона

[Дмитрий]

Kudis, https://caniuse.com/#feat=input-pattern

[Kudis]

Ладно, некорректно выразился. Проку от этого pattern-а нигде кроме айфона нет, т.к. на андроиде пользователь будет видеть буквенную клавиатуру, даже если указано паттерном, что в поле только цифры.
Для пользователя всегда удобнее inputmask, где ещё и проверку можно встроить

[Denis Melnikov]

Kudis, проверка и так по патерну будет. Проблема в маске, лишние цифры, к примеру маска подставляет +7 , юзер все равно пишет первым 7 и в конце мы не получаем 1 цифру телефона.