¿Cómo puedo encontrar la ubicación del cursor (X/Y, no línea/columna) en un área de texto HTML?

Question

Me gustaría mostrar una lista desplegable en un <textarea> para ayudar al usuario a escribir ciertas cosas. Usted sabe esto de los IDEs actuales como la finalización del código. A medida que empiezas a escribir algo, aparecerá una ventana emergente en la ubicación actual del cursor/cursor y podrás navegar con las teclas de flecha para completar tu ingreso de texto.

Sé how to get the cursor position en la cadena de texto (es decir, el índice de caracteres de la posición del cursor), pero no sé cómo conseguir la coordenadas X/Y (algo así como offsetWidth y offsetHeight) del cursor dentro del elemento <textarea> de manera que Puedo ubicar mi elemento de lista allí. ¿Es eso posible en HTML/JavaScript, y cómo funcionaría?

Answer 1

Con una entrada editable html (en un iframe como CKeditor o Rich Text Editor o incluso mejor: jsfiddle) se podría insertar un elemento span vacío en la posición de intercalación y obtener la posición de ese elemento para mostrar su menú desplegable.

Puede parecer complejo, pero no se me ocurre ninguna otra forma de hacerlo.

Tiene algunas posibilidades adicionales cuando se utiliza para un editor de código, usted podría código de color del código de texto y formato como jsFiddle hace, y tal vez incluso construir algún tipo de código-auto-completado de palabras clave, etc.