Как сделать так, чтобы при нажатии на текстовое поле курсор ставился в конце?

Question

Использую для input с type='text' маску для ввода номера телефона (+7(...)...-..-..). Всё работает, но проблема в том, что если пользователь клиент по полю слева, то курсор появляется перед маской, т. е. перед +7. Как сделать, чтобы курсор автоматически перемещался в конец поля?

Answer 1

Насколько мне известно, за любое событие на объекте отвечает его фильтр событий. Смотря на чём пилите. Если юзаете .Net MVC или Qt там эта фича точно должна быть. Если же просто html то наверное в JS function()... и добавляете её в фильтр обработки событий объекта в теге элемента: <input type="text" onclick="function();" ... Всех благ.

Answer 2

Вот пример - если при фокусе каретка левее нужной позиции, то она ставится в нужную позицию:

let input = document.querySelector('input');
let caretPos = 4;
input.addEventListener('focus',()=>{
  setTimeout(()=>{
    if( input.selectionStart < caretPos ){
      input.setSelectionRange( caretPos, caretPos );
    }
  },0);
});

<input type="text" value="+7 (___) ___ - ___ - ___ - ___">

БЛОГ НА HUSL

Как сделать так, чтобы при нажатии на текстовое поле курсор ставился в конце?

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