Перемещение курсора в определенное положение строки ввода

Question

Коллеги здравствуйте. Столкнулся с проблемой, повешал на поле ввода номера маску, но курсор ввода при нажатии возникает в точке нажатия, а по хорошему нужно что бы он был вначале. Нашел некий код:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
      if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
      } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
      }
  });
  return this;
  };

  $("#phone").setCursorPosition(3);

но он почему то не отрабатывает, подскажите где я совершил ошибку?

Вот наглядный пример:

$.fn.setCursorPosition = function(pos) {
  this.each(function(index, elem) {
      if (elem.setSelectionRange) {
      elem.setSelectionRange(pos, pos);
      } else if (elem.createTextRange) {
      var range = elem.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
      }
  });
  return this;
  };


  $("#phone").setCursorPosition(3);


$(document).ready(function() { 
    $("#phone").mask("+7(999)999-99-99");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.maskedinput.js" type="text/javascript"></script>
<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
<div class="form-zvonok">   
    <label>Номер телефона (с кодом) <span>*</span></label>
    <input type='text' id="phone"name='usernumber' required></div>
  
</form>

Answer 1

Долго долго тыкал, в итоге вот что натыкал:

$.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[name="usernumber"]').click(function(){
    $(this).setCursorPosition(3);  
  });


$(document).ready(function() { 
    $("#phone").mask("+7(999)999-99-99");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.maskedinput.js" type="text/javascript"></script>
<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
<div class="form-zvonok">   
    <label>Номер телефона (с кодом) <span>*</span></label>
    <input type='text' id="phone"name='usernumber' required></div>
  
</form>

БЛОГ НА HUSL

Перемещение курсора в определенное положение строки ввода

Ответы (1 шт):