Como obtenho as coordenadas de pixel (x, y) do cursor em checkboxs de texto?

Eu estou usando o jQuery e tentando encontrar uma maneira de cross-browser para obter as coordenadas de pixel do cursor em . Em seguida, o texto da área de texto até o cursor é copiado para a div e um é inserido logo após. Em seguida, o conteúdo do texto do intervalo é definido para o restante do texto na área de texto, para reproduzir fielmente o agrupamento no div falso.

Esse é o único método garantido para lidar com todos os casos de borda referentes à quebra de linhas longas. Ele também é usado pelo GitHub para determinar a posição de sua lista suspensa @ usuário.

Nota: esta resposta descreve como obter as coordenadas de caracteres do cursor de texto / cursor. Para encontrar as coordenadas de 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 object Document.selection , a partir disso podemos obter um object TextRange que nos dá access à seleção e, portanto, à (s) posição (ões) do cursor.

O modelo FF / Opera usa as variables ​​úteis [input] .selectionStart and selectionEnd.

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

Se o campo de input não tiver foco, você poderá descobrir que nenhum deles está definido. Eu tive um bom sucesso com o seguinte código para inserir um pedaço de texto na localização atual do cursor, também substituindo 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 do bug: os links não estão sendo corretamente marcados no par.

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

Eu não acho que isso pode 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á um post de blog de 2005 .