Примеры JavaScript - Как переместить (установить) текстовый курсор в начало или конец поля ввода textarea или input?

Как переместить (установить) текстовый курсор в начало или конец поля ввода textarea или input?

IE4+

Internet Explorer позволяет нам сделать это при помощи следующих методов :

createTextRange() - данный метод создает объект типа TextRange (текстовый диапазон) и позволяет манипулировать текстом. Пустой текстовый диапазон представляет собой курсор - точку ввода.

collapse() - данный метод объекта TextRange сужает текстовый диапазон до 0 (превращает его в курсор (в точку ввода)) и устанавливает точку ввода либо в начало диапазона (collapse(true) или просто collapse(), так как значение по умолчанию true) или в конец (collapse(false)).

select() - медод объекта TextRange нужный для визуального выделения текста включенного в диапазон. В случае пустого диапазона просто устанавливает текстовый курсор.

Пример:

function moveCaretToStart(inputObject)
{
  if (inputObject.createTextRange)
  {
   var r = inputObject.createTextRange();
   r.collapse(true);
   r.select();
  }
}

function moveCaretToEnd(inputObject)
{
  if (inputObject.createTextRange)
  {
   var r = inputObject.createTextRange();
   r.collapse(false);
   r.select();
  }
}

в качестве аргумента ф-ям передается объект элемента ввода, например: moveCaretToStart(document.formName.textareaName)

Mozilla/Gecko

setSelectionRange(start, end) - данный метод создающий текстовое выделение в случае когда start и end совпадают установит курсор в нужную позицию

function moveCaretToStart(inputObject)
{
 if (inputObject.selectionStart)
 {
  inputObject.setSelectionRange(0,0);
  inputObject.focus();
 }
}
function moveCaretToEnd(inputObject)
{
 if (inputObject.selectionStart)
 {
  var end = inputObject.value.length;
  inputObject.setSelectionRange(end,end);
  inputObject.focus();
 }
}