Установка курсора в начало при вводе телефона

В формах заявки на сайтах всегда есть поле ввода для телефона. Чтобы пользователь не мог ввести туда сторонних символов используется скрипт maskedinput. Но проблема в том, что если просто подключить данный скрипт, то пользователь может начать ввод телефона с любой позиции. Точнее будет сказать — с той, в которую попадет нажав мышь. Следующий код поможет это исправить, он будет ставить курсор в начало строки ввода.

$(function () {
    $.mask.definitions['9'] = '';
    $.mask.definitions['d'] = '[0-9]';
    $('input[type="tel"]').mask("+7(ddd) ddd-dd-dd");
});
$.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();
    }
  };
  $('input[type="tel"]').click(function(){
    $(this).setCursorPosition(3);  // set position number
  });

В данном примере сначала производится маскирование номера телефона. Поле ввода телефона должно иметь атрибут type=»tel». И курсор будет ставиться в третью позицию после +7(

 

 

РубрикиJS

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *