Как решить проблему с маской ввода на телефоне?

Question

[Евгений Мягких]

Друзья, всем привет!

Есть сайт altayekoprodukt-opt.ru, к которому подключена маска ввода телефона maskedinput.js


Форма появляется при нажатии на кнопки "хочу прайс, позвонить мне" и т.д.

В дестктопных браузерах и мобильном FF все отлично, но в мобильном Сhrome и Opera в маске не вводятся цифры, а вместо введенных символов подставляются нижние подчеркивания.

Сам не справляюсь, нужна помощь.

В чем можем быть проблема?

Заранее спасибо!

Comments

[Максим Тимофеев]

где маска?

Answer 1

[Kudis]

Первое, что нужно сделать, это указать для данного поля тип 'tel' (у Вас 'text'), тогда ещё и клавиатура на мобилах будет цифровая.
Есть вероятность, что это исправит ситуацию.
Если нет, то используйте плагин 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"
            }
        }
    });
});

ещё у Вас в скрипте есть вот такое безумство:

var z;
    (z = $(".js-form__input--tel")).on("keydown", function (t) {
        var a = t.keyCode;
        if ("+7 (___) ___-____" === z.val() && (104 === a || 103 === a || 55 === a || 56 === a)) return !1
    });

не знаю что оно делает, но, кажется, что-то плохое)))))

Comments

[Евгений Мягких]

Это я так запретил вводить пользователям 8 или 7 первой цифрой в поле ввода телефона. Пока с темой регулярных выражений я знаком слабо, потому пришел к такому решению.

Вот не минифицированый код:

// ВАЛИДАЦИЯ ПОЛЯ ВВОДА ТЕЛЕФОНА. ОБРЕЗАЕМ 8 и 7

    var validateTelephone = function() {
        var $telField = $('.js-form__input--tel');

        $telField.on('keydown', function(e) {
            var keyCode = e.keyCode;
            var fieldValue = $telField.val();
            if (fieldValue === '') {
                if (keyCode === 104 || keyCode === 103 || keyCode === 55 || keyCode === 56) {
                    return false;
                }
            }
        });
    };

    validateTelephone();

А почему это безумство? Как сделать лучше?

[Kudis]

Евгений Мягких,
чтобы велосипедов не городить используй inputmask и валдацию, которую я указал последней в ответе. Она отрежет всё что нужно, пропустив, только нужный Вам формат телефона
можете вводить +7955..., 8955... или 7955... , все варианты превратятся в +7 (955) ...

[Евгений Мягких]

Kudis, Уже так и сделал. Отличное решение!

Answer 2

[Александр Серяков]

Есть подозрение что это происходит из-за загрузки скриптов в момент window.onload, попробуй заменить это на $(document).ready(function () {
$(".js-form__input--tel").mask("[phone]")
});