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);
javascript
jquery
html
textfield
jcnnghm
fonte
fonte
$(this).get(0).setSelectionRange)
? Você sabe que é exatamente o mesmo quethis.setSelectionRange
, apenas mais lento e mais difícil de ler, certo? O jQuery não está literalmente fazendo nada por você aqui.Respostas:
Eu tenho duas funções:
Então você pode usar o setCaretToPos assim:
Exemplo ao vivo com a
textarea
e aninput
, mostrando o uso do jQuery:Mostrar snippet de código
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).
fonte
textarea
(einput
) para mim no Chrome, Firefox, IE8 e IE11.Aqui está uma solução jQuery:
Com isso, você pode fazer
fonte
selectRange($('.my_input')[0], 3, 5)
se já estiver usando o jQuery. Além disso, ele deve funcionar com mais de um elemento, se você precisar, por qualquer motivo. Se você quiser nativo puro, use a solução do CMS.$('#elem').focus()
antes para que o cursor piscasse para aparecer.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
this
ao suporte ao encadeamento. Aqui estáauma versão correta:fonte
return this.each(function...)
e remover a linha independente.Encontrei uma solução que funciona para mim:
Agora você pode mover o foco para o final de qualquer elemento chamando:
Ou você especifica a posição.
fonte
this.scrollTop(this[0].scrollHeight);
, para garantir que a área de texto seja rolada para tornar o ponto de inserção visível.Isso funcionou para mim no Safari 5 no Mac OSX, jQuery 1.4:
fonte
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.
Uso para usar ctrl-enter para adicionar uma nova linha (como no Facebook):
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.
fonte
No IE para mover o cursor em alguma posição, este código é suficiente:
fonte
Estou usando isso: http://plugins.jquery.com/project/jCaret
fonte
Defina o foco antes de inserir o texto na área de texto assim?
fonte
Isso funciona para mim no chrome
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.
fonte
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.
fonte
return false;
. Você quer, emevent.preventDefault();
vez disso. Se você retornar falso, você está implicandoevent.stopPropagation()
que nem sempre é desejávelCom 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.
fonte
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.
O código está listado abaixo, apenas algumas linhas foram alteradas:
fonte
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:
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
fonte
Você pode alterar diretamente o protótipo se setSelectionRange não existir.
jsFiddle link
fonte