Установить позицию курсора клавиатуры в текстовом поле html

Взято из Установка позиции курсора клавиатуры в текстовом поле или TextArea с помощью Javascript

Общая функция, которая позволит вам вставить курсор в любую позицию текстового поля или текстового поля, которое вы хотите:

function setCaretPosition(elemId, caretPos) {
    var elem = document.getElementById(elemId);

    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

Первый ожидаемый параметр - это идентификатор элемента, на который вы хотите вставить курсор клавиатуры. Если элемент не может быть найден, ничего не произойдет (очевидно). Второй параметр - это индекс позиции каретки. Ноль поместит курсор клавиатуры в начало. Если вы передадите число, превышающее количество символов в значении элементов, в конце будет помещен курсор клавиатуры.

Протестировано в IE6 и выше, Firefox 2, Opera 8, Netscape 9, SeaMonkey и Safari. К сожалению, в Safari это не работает в сочетании с событием onfocus).

Пример использования вышеуказанной функции для принудительного перехода курсора клавиатуры к концу всех текстовых полей на странице, когда они получают фокус:

function addLoadEvent(func) {
    if(typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        if(func) {
            var oldLoad = window.onload;

            window.onload = function() {
                if(oldLoad)
                        oldLoad();

                func();
            }
        }
    }
}

// The setCaretPosition function belongs right here!

function setTextAreasOnFocus() {
/***
 * This function will force the keyboard caret to be positioned
 * at the end of all textareas when they receive focus.
 */
    var textAreas = document.getElementsByTagName('textarea');

    for(var i = 0; i < textAreas.length; i++) {
        textAreas[i].onfocus = function() {
            setCaretPosition(this.id, this.value.length);
        }
    }

    textAreas = null;
}

addLoadEvent(setTextAreasOnFocus);

Ссылка в ответе не работает, она должна работать (все кредиты идут на blog.vishalon.net):

http://snipplr.com/view/5144/getset-cursor-in-html-textarea/.

Если код снова потеряется, вот две основные функции:

function doGetCaretPosition(ctrl)
{
 var CaretPos = 0;

 if (ctrl.selectionStart || ctrl.selectionStart == 0)
 {// Standard.
  CaretPos = ctrl.selectionStart;
 }
 else if (document.selection)
 {// Legacy IE
  ctrl.focus ();
  var Sel = document.selection.createRange ();
  Sel.moveStart ('character', -ctrl.value.length);
  CaretPos = Sel.text.length;
 }

 return (CaretPos);
}


function setCaretPosition(ctrl,pos)
{
 if (ctrl.setSelectionRange)
 {
  ctrl.focus();
  ctrl.setSelectionRange(pos,pos);
 }
 else if (ctrl.createTextRange)
 {
  var range = ctrl.createTextRange();
  range.collapse(true);
  range.moveEnd('character', pos);
  range.moveStart('character', pos);
  range.select();
 }
}

Поскольку мне действительно было нужно это решение и типичное базовое решение (сфокусировать ввод - затем установить значение, равное самому себе) не работает в разных браузерах, я потратил некоторое время настраивал и редактировал все, чтобы все заработало. Вот что я придумал, основываясь на коде @ kd7.

Наслаждайтесь! Работает в IE6 +, Firefox, Chrome, Safari, Opera

Метод кроссбраузерного позиционирования курсора (пример: перемещение курсора в конец)

// ** USEAGE ** (returns a boolean true/false if it worked or not)
// Parameters ( Id_of_element, caretPosition_you_want)

setCaretPosition('IDHERE', 10); // example

function setCaretPosition(elemId, caretPos) {
    var el = document.getElementById(elemId);

    el.value = el.value;
    // ^ this is used to not only get "focus", but
    // to make sure we don't have it everything -selected-
    // (it causes an issue in chrome, and having it doesn't hurt any other browser)

    if (el !== null) {

        if (el.createTextRange) {
            var range = el.createTextRange();
            range.move('character', caretPos);
            range.select();
            return true;
        }

        else {
            // (el.selectionStart === 0 added for Firefox bug)
            if (el.selectionStart || el.selectionStart === 0) {
                el.focus();
                el.setSelectionRange(caretPos, caretPos);
                return true;
            }

            else  { // fail city, fortunately this never happens (as far as I've tested) :)
                el.focus();
                return false;
            }
        }
    }
}

Я немного скорректировал ответ kd7, потому что elem.selectionStart будет оценивать как false, когда selectionStart случайно равен 0.

function setCaretPosition(elem, caretPos) {
    var range;

    if (elem.createTextRange) {
        range = elem.createTextRange();
        range.move('character', caretPos);
        range.select();
    } else {
        elem.focus();
        if (elem.selectionStart !== undefined) {
            elem.setSelectionRange(caretPos, caretPos);
        }
    }
}

Я нашел простой способ решить эту проблему, протестированный в IE и Chrome:

function setCaret(elemId, caret)
 {
   var elem = document.getElementById(elemId);
   elem.setSelectionRange(caret, caret);
 }

Передайте этой функции идентификатор текстового поля и позицию курсора.

Если вам нужно сфокусировать какое-то текстовое поле, и ваша единственная проблема заключается в том, что весь текст выделяется, тогда как вы хотите, чтобы курсор находился в конце, то в этом конкретном случае вы можете использовать этот трюк, устанавливая значение текстового поля на себя после фокуса:

$("#myinputfield").focus().val($("#myinputfield").val());

Я бы исправил такие условия, как показано ниже:

function setCaretPosition(elemId, caretPos)
{
 var elem = document.getElementById(elemId);
 if (elem)
 {
  if (typeof elem.createTextRange != 'undefined')
  {
   var range = elem.createTextRange();
   range.move('character', caretPos);
   range.select();
  }
  else
  {
   if (typeof elem.selectionStart != 'undefined')
    elem.selectionStart = caretPos;
   elem.focus();
  }
 }
}

HTMLInputElement. setSelectionRange (selectionStart, selectionEnd);

// References
var e = document.getElementById( "helloworldinput" );

// Move caret to beginning on focus
e.addEventListener( "focus", function( event )
{
    // References
    var e = event.target;

    // Action
    e.setSelectionRange( 0, 0 );            // Doesn’t work for focus event
    
    window.setTimeout( function()
    {
        e.setSelectionRange( 0, 0 );        // Works
        //e.setSelectionRange( 1, 1 );      // Move caret to second position
        //e.setSelectionRange( 1, 2 );      // Select second character

    }, 0 );

}, false );

Совместимость с браузером (только для типов: текст, поиск, URL, телефон и пароль): https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange#Specifications