Маска телефона в поле input?

Question

[Алекс]

В сети не составляет труда найти плагин для JQuery набора телефона по маске, остается только подключить сам JQuery и прописать $('[type='tel']').mask('[phone]'). Но кривые пользователи набирают всеровно телефон с 7 из чего следует, что номер приходит неверный (не хватает последней цифры). Как можно доработать его или может есть другое решение какое-то (другой плагин или поставить проверку перед сабмитом)?

Answer 1

[Владимир Проскурин]

Сделать код +7 через select, в котором можно даже флажки вывести, и пусть у него значение по умолчанию будет +7. А остальные цифры [phone] вывести в Input с маской, как вы и выводите (только без +7). Это самый простой и безпоследственный вариант.

Comments

[Алекс]

но так проблема у меня не в +7, проблема в том что пользователи вводят после автоматом выставленной +7 еще 7 и получается что последняя цифра не вписывается в маску. Пока поставил проверку на +79 перед отправкой формы.

[Dies Irae]

Алекс, а что тут поделать?
P.S. Можно при неправильном заполнении телефона выводить мерцающее изображение. Может пользователь болен эпилепсией и мы сделаем мир чуть чище?

[Владимир Проскурин]

Алекс, как раз таки селект заставит их задуматься. Куча форм так работают, у людей уже привычка вводить с селектом. Сделайте два варианта, и считайте, с какой формы кортекнее будут приходить данные

[Алекс]

Пока самый толковый ответ что селект заставит людей задуматься, а то меня хлебушки задрали уже, которые тыкают все что тыкается и не тыкается и отправляют все что отправляется и не отправляется

Answer 2

[Алекс]

Решили проблему добавлением одного дополнительного символа необязательного в маску.

$(".mask-phone").mask('[phone]?9', {placeholder: ''});

Answer 3

[AlexProWeb]

Вот мое решение

<input type="tel" name="phone" maxlength="16" placeholder="+7(___)___-__-__"  id="phone"/>
<input type="tel" name="phone" maxlength="16" placeholder="+7(___)___-__-__"  id="phone2"/>

//------------javaScript--------------------------------
//подключение к текстовому полю
document.querySelector('#phone').onkeydown = function(e){
inputphone(e,document.querySelector('#phone'))
}
document.querySelector('#phone2').onkeydown = function(e){
inputphone(e,document.querySelector('#phone2'))
}
//-- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --


//Функция маски формат +7 (
function inputphone(e, phone){
function stop(evt) {
    evt.preventDefault();
}
let key = e.key, v = phone.value; not = key.replace(/([0-9])/, 1)

if(not == 1 || 'Backspace' === not){
if('Backspace' != not){ 
    if(v.length < 3 || v ===''){phone.value= '+7('}
    if(v.length === 6){phone.value= v +')'}
    if(v.length === 10){phone.value= v +'-'}
     if(v.length === 13){phone.value= v +'-'}
    }
}else{stop(e)}  }

Comments

[AlexProWeb]

Это на чистом js формат [phone]

Answer 4

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

Сделать обычное текстовое поле.
Многие не пишут ничего а копируют, у них вбит в блокнотике телефон через 7, через 8 или вообще городской и они его втыкают.
Зачем усложнять им жизнь, да и себе? :)
Я так раз пьяный перевел деньги на номер с 77, и не очень люблю эти маски ....
Неужели если вам придет телефон в другом формате, вы не поймете?

Еще как вариант, это подать сигнал звуковой, если цифр больше чем должно быть.

Comments

[Алекс]

Да тут шалман какой-то, поставил проверку именно на +79 начало. Ну и вопрос был "Нам нужна проверка на телефон. но кто то пишет +77". Поставил. Теперь пишут "Но телефон же с [phone] не пройдет". я присел короче -_-

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

Так так даже проще.
Если не 79 обводите красным рамку поля и не давайте отправить форму.

[Алекс]

Александр Суханов, выше написал что сделал именно так, но мне кинули предъяву что номера есть и другие, нужно проверить на адекватность номер, как его проверить на адекватность я не знаю

Answer 5

[Александр Логинов-Солоницын]

$('[type='tel']').mask('[phone]'). По крайней мере в последнем проекте после тестов было решено изменить маску именно на такую

Answer 6

[sergski]

Нужно разбирать введеные пользователем данные. Например пользователь копипастит [phone] или [phone] и тп. Вам нужно найти и удалить "+7", пробелы, дефисы, скобки, чтобы осталось только цифры -- код и номер. Их и вставляете, если цифр осталось 10. Если меньше, выводите сообщение проверить номер.
Т.е. у вас в форме не должно в принципе вывестись такое: +7+749512345 или +7+7(495)123 или +7+7(495) 12 и тп. Если вводит с клавиатуры не должны вводится плюсы скобки, дефисы, -- только цифры.

Answer 7

[DanKud]

А чем не вариант вешать событие .keypress() и фильтровать введенные данные обрезая первые +7 или 7. Но есть нюанс еще в том, что +77.. это казахстанские номера, в теории такой номер тоже на российском сайте тоже может всплыть.

Comments

[Алекс]

не знаю читает мои коменты кто то или нет, в том то и проблема "я хочу что бы люди не вводили левое типо +77 на обычных номерах, но я хочу что бы это тоже учитывалось, вдруг будет такой номер, а он не пройдет". Вот и появляется палка с двумя концами. Как проверить номер на адекватность