Como obtenho as coordenadas de pixel (x, y) do cursor nas caixas de texto?

Question

Estou usando jQuery e tentando encontrar uma maneira entre navegadores de obter as coordenadas de pixel do cursor <textarea>areia input caixas para que eu possa colocar um div absolutamente posicionado em torno deste local.

Existe algum plugin jQuery?Ou um snippet de JavaScript para fazer exatamente isso?

Answer 1

Procurei um plugin de coordenadas de circunflexo de textarea para preenchimento automático de meteoros, então avaliei todos os 8 plugins no GitHub.O vencedor é, de longe, posição de área de texto de Componente.

Características

• precisão de pixels
• sem nenhuma dependência
• compatibilidade do navegador:Chrome, Safari, Firefox (apesar dois insetos tem), IE9+;pode funcionar, mas não foi testado no Opera, IE8 ou anterior
• suporta qualquer família e tamanho de fonte, bem como transformações de texto
• a área de texto pode ter preenchimento ou bordas arbitrárias
• não confundido com barras de rolagem horizontais ou verticais na área de texto
• suporta retornos rígidos, tabulações (exceto no IE) e espaços consecutivos no texto
• posição correta em linhas maiores que as colunas na área de texto
• não posição "fantasma" no espaço vazio no final de uma linha ao agrupar palavras longas

Aqui está uma demonstração - http://jsfiddle.net/dandv/aFPA7/

Como funciona

Um espelho <div> é criado fora da tela e estilizado exatamente como o <textarea>.Então, o texto da textarea até o cursor é copiado para o div e um <span> é inserido logo depois dele.Em seguida, o conteúdo do texto do span é definido como o restante do texto na textarea, para reproduzir fielmente o empacotamento no faux div.

Este é o único método garantido para lidar com todos os casos extremos relativos à quebra de linhas longas.Também é usado pelo GitHub para determinar a posição de seu @ menu suspenso do usuário.

Answer 2

Observação:esta resposta descreve como obter o coordenadas dos personagens do cursor de texto/caret.Para encontrar as coordenadas dos pixels, você precisará estender isso ainda mais.

A primeira coisa a lembrar é que o cursor pode estar em três estados

• um cursor de inserção regular em uma posição específica
• uma seleção de texto que possui uma determinada área delimitada
• não ativo:textarea não tem foco.Não foi usado.

O modelo IE usa o objeto documento.seleção, a partir disso podemos obter um Faixa de texto objeto que nos dá acesso à seleção e, portanto, à(s) posição(ões) do cursor.

O modelo FF/Opera usa as variáveis ​​úteis [input].selectionStart e selectionEnd.

Ambos os modelos representam um cursor ativo regular como uma seleção de largura zero, sendo o limite esquerdo a posição do cursor.

Se o campo de entrada não tiver foco, você poderá descobrir que nenhum deles está definido.Tive bom sucesso com o código a seguir para inserir um pedaço de texto na localização atual do cursor, substituindo também a seleção atual, se presente.Dependendo do navegador exato, YMMV.

function insertAtCursor(myField, myValue) {

/* selecion model - ie */
if (document.selection) {
  myField.focus();
  sel = document.selection.createRange();
  sel.text = myValue;
}

/* field.selectionstart/end  firefox */ 
else if (myField.selectionStart || myField.selectionStart == '0' ) {

  var startPos = myField.selectionStart;
  var endPos = myField.selectionEnd;
  myField.value = myField.value.substring(0, startPos)
    + myValue
    + myField.value.substring(endPos, myField.value.length);

  myField.selectionStart = startPos + myValue.length;
  myField.selectionEnd = startPos + myValue.length;
  myField.focus();
} 

// cursor not active/present
else {
  myField.value += myValue;
}

Nota de bug:os links não estão sendo marcados corretamente no parágrafo superior.

Objeto de seleção: http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
Objeto TextRange: http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

Answer 3

Não acho que isso possa ser feito em todos os navegadores.Alguém fez isso no IE6, mas não funciona no FF ou no Opera (AFAIK).Talvez você consiga fazê-lo funcionar em todos os navegadores.

Aqui está uma postagem de blog de 2005.