jQuery Definir posição do cursor na área de texto

Como você define a posição do cursor em um campo de texto usando o jQuery? Eu tenho um campo de texto com conteúdo e quero que o cursor do usuário seja posicionado em um determinado deslocamento quando se concentrar no campo. O código deve ficar assim:

$('#input').focus(function() {
  $(this).setCursorPosition(4);
});

Como seria a implementação dessa função setCursorPosition? Se você tivesse um campo de texto com o conteúdo abcdefg, essa chamada resultaria no posicionamento do cursor da seguinte maneira: abcd ** | ** efg.

Java tem uma função semelhante, setCaretPosition. Existe um método semelhante para javascript?

Atualização: modifiquei o código do CMS para funcionar com o jQuery da seguinte maneira:

new function($) {
  $.fn.setCursorPosition = function(pos) {
    if (this.setSelectionRange) {
      this.setSelectionRange(pos, pos);
    } else if (this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      if(pos < 0) {
        pos = $(this).val().length + pos;
      }
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  }
}(jQuery);

Eu tenho duas funções:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  }
  else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos (input, pos) {
  setSelectionRange(input, pos, pos);
}

Então você pode usar o setCaretToPos assim:

setCaretToPos(document.getElementById("YOURINPUT"), 4);

Exemplo ao vivo com a textareae an input, mostrando o uso do jQuery:

function setSelectionRange(input, selectionStart, selectionEnd) {
  if (input.setSelectionRange) {
    input.focus();
    input.setSelectionRange(selectionStart, selectionEnd);
  } else if (input.createTextRange) {
    var range = input.createTextRange();
    range.collapse(true);
    range.moveEnd('character', selectionEnd);
    range.moveStart('character', selectionStart);
    range.select();
  }
}

function setCaretToPos(input, pos) {
  setSelectionRange(input, pos, pos);
}

$("#set-textarea").click(function() {
  setCaretToPos($("#the-textarea")[0], 10)
});
$("#set-input").click(function() {
  setCaretToPos($("#the-input")[0], 10);
});

<textarea id="the-textarea" cols="40" rows="4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<br><input type="button" id="set-textarea" value="Set in textarea">
<br><input id="the-input" type="text" size="40" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<br><input type="button" id="set-input" value="Set in input">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

A partir de 2016, testou e trabalhou no Chrome, Firefox, IE11 e até o IE8 (veja o último aqui ; o Stack Snippets não suporta o IE8).

Aqui está uma solução jQuery:

$.fn.selectRange = function(start, end) {
    if(end === undefined) {
        end = start;
    }
    return this.each(function() {
        if('selectionStart' in this) {
            this.selectionStart = start;
            this.selectionEnd = end;
        } else if(this.setSelectionRange) {
            this.setSelectionRange(start, end);
        } else if(this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

Com isso, você pode fazer

$('#elem').selectRange(3,5); // select a range of text
$('#elem').selectRange(3); // set cursor position

• JsFiddle
• JsBin

As soluções aqui estão corretas, exceto pelo código de extensão jQuery.

A função de extensão deve percorrer cada elemento selecionado e retornar thisao suporte ao encadeamento. Aqui está a uma versão correta:

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

Encontrei uma solução que funciona para mim:

$.fn.setCursorPosition = function(position){
    if(this.length == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    if(this.length == 0) return this;
    var input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    this.setCursorPosition(this.val().length);
            return this;
}

Agora você pode mover o foco para o final de qualquer elemento chamando:

$(element).focusEnd();

Ou você especifica a posição.

$(element).setCursorPosition(3); // This will focus on the third character.

Isso funcionou para mim no Safari 5 no Mac OSX, jQuery 1.4:

$("Selector")[elementIx].selectionStart = desiredStartPos; 
$("Selector")[elementIx].selectionEnd = desiredEndPos;

Percebo que este é um post muito antigo, mas achei que talvez eu devesse oferecer uma solução mais simples para atualizá-lo usando apenas jQuery.

function getTextCursorPosition(ele) {   
    return ele.prop("selectionStart");
}

function setTextCursorPosition(ele,pos) {
    ele.prop("selectionStart", pos + 1);
    ele.prop("selectionEnd", pos + 1);
}

function insertNewLine(text,cursorPos) {
    var firstSlice = text.slice(0,cursorPos);
    var secondSlice = text.slice(cursorPos);

    var new_text = [firstSlice,"\n",secondSlice].join('');

    return new_text;
}

Uso para usar ctrl-enter para adicionar uma nova linha (como no Facebook):

$('textarea').on('keypress',function(e){
    if (e.keyCode == 13 && !e.ctrlKey) {
        e.preventDefault();
        //do something special here with just pressing Enter
    }else if (e.ctrlKey){
        //If the ctrl key was pressed with the Enter key,
        //then enter a new line break into the text
        var cursorPos = getTextCursorPosition($(this));                

        $(this).val(insertNewLine($(this).val(), cursorPos));
        setTextCursorPosition($(this), cursorPos);
    }
});

Estou aberto à crítica. Obrigado.

ATUALIZAÇÃO: Esta solução não permite que a funcionalidade normal de copiar e colar funcione (por exemplo, ctrl-c, ctrl-v), por isso terei que editar isso no futuro para garantir que a peça funcione novamente. Se você tem uma idéia de como fazer isso, comente aqui e terei prazer em testá-lo. Obrigado.

No IE para mover o cursor em alguma posição, este código é suficiente:

var range = elt.createTextRange();
range.move('character', pos);
range.select();

Estou usando isso: http://plugins.jquery.com/project/jCaret

Defina o foco antes de inserir o texto na área de texto assim?

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

Isso funciona para mim no chrome

$('#input').focus(function() {
    setTimeout( function() {
        document.getElementById('input').selectionStart = 4;
        document.getElementById('input').selectionEnd = 4;
    }, 1);
});

Aparentemente, você precisa de um atraso de um microssegundo ou mais, porque geralmente um usuário se concentra no campo de texto clicando em alguma posição no campo de texto (ou pressionando a guia) que deseja substituir, portanto, é necessário aguardar até que a posição seja definido pelo usuário, clique e altere-o.

Lembre-se de retornar falso logo após a chamada da função, se você estiver usando as teclas de seta, pois o Chrome facilita o processo.

{
    document.getElementById('moveto3').setSelectionRange(3,3);
    return false;
}

Com base nessa pergunta , a resposta não funcionará perfeitamente para ie e opera quando houver nova linha na área de texto. A resposta explica como ajustar o selectionStart, selectionEnd antes de chamar setSelectionRange.

Eu tentei o AdjustOffset da outra pergunta com a solução proposta pelo @AVProgrammer e ele funciona.

function adjustOffset(el, offset) {
    /* From https://stackoverflow.com/a/8928945/611741 */
    var val = el.value, newOffset = offset;
    if (val.indexOf("\r\n") > -1) {
        var matches = val.replace(/\r\n/g, "\n").slice(0, offset).match(/\n/g);
        newOffset += matches ? matches.length : 0;
    }
    return newOffset;
}

$.fn.setCursorPosition = function(position){
    /* From https://stackoverflow.com/a/7180862/611741 */
    if(this.lengh == 0) return this;
    return $(this).setSelection(position, position);
}

$.fn.setSelection = function(selectionStart, selectionEnd) {
    /* From https://stackoverflow.com/a/7180862/611741 
       modified to fit https://stackoverflow.com/a/8928945/611741 */
    if(this.lengh == 0) return this;
    input = this[0];

    if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    } else if (input.setSelectionRange) {
        input.focus();
        selectionStart = adjustOffset(input, selectionStart);
        selectionEnd = adjustOffset(input, selectionEnd);
        input.setSelectionRange(selectionStart, selectionEnd);
    }

    return this;
}

$.fn.focusEnd = function(){
    /* From https://stackoverflow.com/a/7180862/611741 */
    this.setCursorPosition(this.val().length);
}

Pequena modificação no código que encontrei no bitbucket

O código agora pode selecionar / destacar com pontos de início / fim se houver duas posições. Testado e funciona bem no FF / Chrome / IE9 / Opera.

$('#field').caret(1, 9);

O código está listado abaixo, apenas algumas linhas foram alteradas:

(function($) {
  $.fn.caret = function(pos) {
    var target = this[0];
    if (arguments.length == 0) { //get
      if (target.selectionStart) { //DOM
        var pos = target.selectionStart;
        return pos > 0 ? pos : 0;
      }
      else if (target.createTextRange) { //IE
        target.focus();
        var range = document.selection.createRange();
        if (range == null)
            return '0';
        var re = target.createTextRange();
        var rc = re.duplicate();
        re.moveToBookmark(range.getBookmark());
        rc.setEndPoint('EndToStart', re);
        return rc.text.length;
      }
      else return 0;
    }

    //set
    var pos_start = pos;
    var pos_end = pos;

    if (arguments.length > 1) {
        pos_end = arguments[1];
    }

    if (target.setSelectionRange) //DOM
      target.setSelectionRange(pos_start, pos_end);
    else if (target.createTextRange) { //IE
      var range = target.createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos_end);
      range.moveStart('character', pos_start);
      range.select();
    }
  }
})(jQuery)

Eu tive que fazer isso funcionar para elementos editáveis ​​por conteúdo e jQuery e pensei que alguém poderia querer que estivesse pronto para usar:

$.fn.getCaret = function(n) {
    var d = $(this)[0];
    var s, r;
    r = document.createRange();
    r.selectNodeContents(d);
    s = window.getSelection();
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return s.anchorOffset;
};

$.fn.setCaret = function(n) {
    var d = $(this)[0];
    d.focus();
    var r = document.createRange();
    var s = window.getSelection();
    r.setStart(d.childNodes[0], n);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    console.log('position: '+s.anchorOffset+' of '+s.anchorNode.textContent.length);
    return this;
};

O uso $(selector).getCaret()retorna o deslocamento do número e $(selector).setCaret(num)estabelece o deslocamento e define o foco no elemento.

Também é uma pequena dica: se você executar a $(selector).setCaret(num)partir do console, ele retornará o console.log, mas você não visualizará o foco, pois ele é estabelecido na janela do console.

Bests; D

Você pode alterar diretamente o protótipo se setSelectionRange não existir.

(function() {
    if (!HTMLInputElement.prototype.setSelectionRange) {
        HTMLInputElement.prototype.setSelectionRange = function(start, end) {
            if (this.createTextRange) {
                var range = this.createTextRange();
                this.collapse(true);
                this.moveEnd('character', end);
                this.moveStart('character', start);
                this.select();
            }
        }
    }
})();
document.getElementById("input_tag").setSelectionRange(6, 7);

jsFiddle link