How to solve the problem with the input mask on the phone?

Question

JavaScript

Friends, hello everyone!

There is a site altayekoprodukt-opt.ru , to which the maskedinput.js phone input mask is connected.


The form appears when you click on the "I want a price, call me" button, etc.

In desktop browsers and mobile FF, everything is fine, but in mobile Chrome and Opera, numbers are not entered in the mask, and underscores are substituted instead of the entered characters.

I can't do it myself, I need help.

What could be the problem?

Thanks in advance!

Answer 1

The first thing to do is to specify the type 'tel' for this field (you have 'text'), then the keyboard on mobile phones will also be numeric.
There is a chance that this will fix the situation.
If not, then use jQuery's inputmask plugin

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

if you want the format to be "Russian mobile" +7(9xx)xxx-xxxx (where x is any number)
then jQuery inputmask will allow you to make a mask like this:

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

you also have this madness in your script:

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
    });

I don't know what it does, but it seems to be something bad)))))

Answer 2

There is a suspicion that this is due to loading scripts at the time of window.onload, try replacing this with $(document).ready(function () {
$(".js-form__input--tel").mask("+7 ( 999) 999-9999")
});