Definir a posição do cursor do teclado na caixa de texto html

Alguém sabe como mover o cursor do teclado em uma caixa de texto para uma posição específica?

Por exemplo, se uma caixa de texto (por exemplo, elemento de entrada, não área de texto) possui 50 caracteres e eu quero posicionar o sinal de interpolação antes do caractere 20, como devo proceder?

Isto está na diferenciação desta pergunta: jQuery Defina a posição do cursor na área de texto , que requer jQuery.

Extraído da Configuração da posição do cursor do teclado de Josh Stodola em uma caixa de texto ou área de texto com Javascript

Uma função genérica que permitirá inserir o cursor em qualquer posição de uma caixa de texto ou área de texto que você desejar:

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();
        }
    }
}

O primeiro parâmetro esperado é o ID do elemento no qual você deseja inserir o cursor do teclado. Se o elemento não puder ser encontrado, nada acontecerá (obviamente). O segundo parâmetro é o índice de posição do sinal de intercalação. Zero colocará o cursor do teclado no início. Se você passar um número maior que o número de caracteres no valor dos elementos, ele colocará o cursor do teclado no final.

Testado no IE6 e superior, Firefox 2, Opera 8, Netscape 9, SeaMonkey e Safari. Infelizmente, no Safari, ele não funciona em combinação com o evento onfocus).

Um exemplo de uso da função acima para forçar o cursor do teclado a pular para o final de todas as áreas de texto na página quando receberem o foco:

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);

O link na resposta está quebrado, este deve funcionar (todos os créditos vão para blog.vishalon.net ):

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

Caso o código se perca novamente, aqui estão as duas funções principais:

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();
 }
}

Como eu realmente precisava dessa solução, e a solução típica da linha de base ( concentre a entrada - depois defina o valor igual a si mesma ) não funciona em vários navegadores , passei algum tempo aprimorando e editando tudo para fazê-la funcionar. Com base no código do @ kd7 , aqui está o que eu criei .

Aproveitar! Funciona no IE6 +, Firefox, Chrome, Safari, Opera

Técnica de posicionamento de cursor de cursor entre navegadores (exemplo: movendo o cursor para END)

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

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

A carne e as batatas são basicamente o setCaretPosition do @ kd7 , com o maior ajuste if (el.selectionStart || el.selectionStart === 0), no firefox o selectionStart está começando em 0 , o que, em booleano, é claro, está se voltando para False, então estava chegando lá.

No chrome, o maior problema era que apenas fornecê-lo .focus()não era suficiente (continuava selecionando TODO o texto!) Portanto, definimos o valor de si mesmo el.value = el.value;antes de chamar nossa função, e agora ele tem uma compreensão e posição com o parâmetro entrada para usar selectionStart .

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;
            }
        }
    }
}

Eu ajustei a resposta do kd7 um pouco, porque elem.selectionStart será avaliado como falso quando o selectionStart for 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);
        }
    }
}

Encontrei uma maneira fácil de corrigir esse problema, testado no IE e no Chrome:

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

Passe o ID da caixa de texto e a posição do cursor para esta função.

Se você precisa focar em alguma caixa de texto e seu único problema é que todo o texto fica realçado, enquanto você deseja que o cursor esteja no final, nesse caso específico, você pode usar este truque para definir o valor da caixa de texto para si mesmo após o foco:

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

<!DOCTYPE html>
<html>
<head>
<title>set caret position</title>
<script type="application/javascript">
//<![CDATA[
window.onload = function ()
{
 setCaret(document.getElementById('input1'), 13, 13)
}

function setCaret(el, st, end)
{
 if (el.setSelectionRange)
 {
  el.focus();
  el.setSelectionRange(st, end);
 }
 else
 {
  if (el.createTextRange)
  {
   range = el.createTextRange();
   range.collapse(true);
   range.moveEnd('character', end);
   range.moveStart('character', st);
   range.select();
  }
 }
}
//]]>
</script>
</head>
<body>

<textarea id="input1" name="input1" rows="10" cols="30">Happy kittens dancing</textarea>

<p>&nbsp;</p>

</body>
</html>

function SetCaretEnd(tID) {
    tID += "";
    if (!tID.startsWith("#")) { tID = "#" + tID; }
    $(tID).focus();
    var t = $(tID).val();
    if (t.length == 0) { return; }
    $(tID).val("");
    $(tID).val(t);
    $(tID).scrollTop($(tID)[0].scrollHeight); }

Eu fixaria as condições como abaixo:

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();
  }
 }
}