1

Есть input в который пользователь вводит номер телефона:

<input autofocus="autofocus" type="tel"  name="phone" id="phone_number"/>

Используется jQuery Masked Input Plugin Version: 1.4.1

У input есть маска +7(___)___-__-__

if (!$.browser.msie && !parseInt($.browser.version)<7) 
    {$('#phone_number').mask("+7(999)999-99-99");}

Если пользователь передвинул курсор в середину маски, то ему сложно ввести номер телефона (особенно если он смотрит сайт на смартфоне).

Например, он случайно передвинул курсор +7(___)___-КУРСОР __-__ Тогда, когда он начнет вводить номер, получится ввести только 4 цифры. +7(___)___-98-76. А далее ввести нельзя.

Есть две разные идеи:

  1. Как-то запретить ставить курсор так, что бы слева от курсора были пустые (незаполненные) символы. Тогда в примере выше: Если пользователь хочет поставить курсор в центре +7(___)___-КУРСОР __-__ то он автоматический передвигается влево: +7(КУРСОР ___)___- __-__

  2. Как-то реализовать: Если пользователь поставил курсор в центр +7(___)___-КУРСОР __-__ и начал вводить номер телефона, то ввод происходит так:

+7(___)___-КУРСОР __-__  
+7(___)___-9_-__     
+7(___)___-98-__   
+7(___)___-98-7_   
+7(___)___-98-76
+7(___)__9-87-65
+7(___)_98-76-54
+7(___)987-65-43
+7(__9)876-54-32
+7(_98)765-43-21
+7(987)654-32-10

Как реализовать эти варианты?

3
  • 1
    Кажется, первый вариант лучше! 5 ноя 2018 в 10:04
  • Я готов на оба варианта. Но не понимаю как их реализовать.
    – Дима
    5 ноя 2018 в 10:09
  • Пример того, как можно двигать курсор jsfiddle.net/fwm2hdcx/1 5 ноя 2018 в 10:30

4 ответа 4

1

jQuery, плагины, "допиливание" плагинов... Нативом работы на час:

document.querySelectorAll('input.phone').forEach(function(item) {
  item.addEventListener('input', function() {
    fCurPosEnd(this);
  });
  item.addEventListener('click', function() {
    fCurPosEnd(this);
  });
  item.addEventListener('keyup', function() {
    fCurPosEnd(this);
  });
  fCurPosEnd(item);
});

function fCurPosEnd(el) {
  let sVal = el.value.replace(/\D+/gi, '').slice(1);
  sVal = sVal + '__________'.slice(sVal.length);
  let sNumb = sVal.match(/(.{3})(.{3})(.{2})(.{2})/);
  el.value = '+7(' + sNumb[1] + ')' + sNumb[2] + '-' + sNumb[3] + '-' + sNumb[4];
  el.focus();
  el.selectionStart = el.selectionEnd = (el.value.search(/[)-]*_/gi) < 0) ?
    el.value.length :
    el.value.search(/[)-]*_/gi);
}
input.phone:invalid { background: #fdd; } input.phone:valid { background: #cfc; }
<input class="phone" type="text" pattern="[^_]*">

PS Не проверял на кроссбраузерность (Win7+Chrome70 - "на ура!")

5
  • Невозможно поставить курсор в произвольное место, если часть данных введена. 5 ноя 2018 в 15:04
  • @StepanKasyanenko что значит в "произвольное место"? Номер справа налево диктуют и записывают что ли? В примере всё логично - начал набирать, прервался, продолжил с места, где остановился. Если ставить в произвольное место, то вероятность ошибиться, поставив курсор "не туда", намного выше, чем набирать цифры по порядку.
    – UModeL
    5 ноя 2018 в 16:27
  • Начал набирать, набрал 8 цифр. Увидел, что ошибся в 3 цифре. А курсор поставить и изменить нельзя. Придется все стирать, потом заново набирать. Не очень удобный UX. 5 ноя 2018 в 16:29
  • @StepanKasyanenko повторный ввод заставит более внимательно отнестись к набору. А за "удобствами" можно и не заметить, что ошибся ещё и в пятой цифре)) Ждём вашего решения сего вопроса ;-)
    – UModeL
    5 ноя 2018 в 16:37
  • 1
    Смешно, конечно. Запретим изменять текст в инпуте, что бы пользователь внимательно вводил. Желаю вам, что бы на СО сделали такой инпут при ответе - менять нельзя, только стирать и заново вводить. Это повысит качество ответов! Можете внести как предложение на MSE))) 5 ноя 2018 в 17:07
0

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

        $('#phone_number').click(function(){
            if ($('#phone_number').val() == "+7(___)___-__-__")
                {$(this)[0].selectionStart = 3; $(this)[0].selectionEnd = 3;}
        });

0

Это делается очень просто, смотри, после +7 у тебя появляется _____. И из-за нее курсор ставится в конце. Мы просто уберем нижнее подчеркивание и курсор всегда будет попадать после +7 и к тому же, с возможностью редактировать номер без стирания :) То есть просто добавь через запятую плейсхолдер с кавычками и закрывающимися тегами. Такое решение применяется для интеграции сервиса по Смс рассылкам, т.к. требуются номера в формате +7хххххх

jQuery(function($){
   $("#pop_phone").mask("+7(999) 999-9999", {placeholder: "" });
});
1
  • В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в Справке. 22 окт 2021 в 11:02
0

Это решение ставит курсор на тот момент, где пользователь закончил вводить номер

$.fn.setCursorPosition = function(pos) {
  if ($(this).get(0).setSelectionRange) {
    $(this).get(0).setSelectionRange(pos, pos);
  } else if ($(this).get(0).createTextRange) {
    var range = $(this).get(0).createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
};
function rightPos(phone) {
  for (var i = 0; i < phone.length; i++) {
    if(phone.charAt(i) == "_") {
      console.log(phone.charAt(i));
      return i
    }
  }
  return phone.length - 1
}
$("input[name=phone]").click(function(){
  let phone = $(this).val()
  $(this).setCursorPosition(rightPos(phone));
}).mask("+7 (999) 999-9999", {autoclear: false});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.