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 that you have read and understand our privacy policy and code of conduct.

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