20 votos

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

Me gustaría mostrar una lista desplegable en un <textarea> para ayudar al usuario en la tipificación de ciertas cosas. Usted sabe que esto de la actual IDEs como la finalización de código. Como empezar a escribir algo, una ventana emergente aparecerá a la derecha el actual del cursor/símbolo de intercalación de ubicación y se puede navegar con las teclas de flecha para completar el texto de entrada.

Yo sé cómo llegar a la posición del cursor en la cadena de texto (es decir, el carácter de índice de la posición del cursor), pero no sé cómo obtener las coordenadas X/Y (algo como offsetWidth y offsetHeight) del cursor dentro de la <textarea> elemento para que yo pueda posición de mi elemento de la lista no. Es posible que en HTML/JavaScript, y ¿cómo funciona?

2voto

Willem Puntos 4245

Con un html editables de entrada (en un iframe como CKeditor o Editor de Texto Enriquecido o mejor aún: jsfiddle) puede insertar un vacío span elemento en la posición del cursor y obtener la posición de ese elemento para mostrar el menú desplegable.

Puede parecer complejo, pero no puedo pensar en ninguna otra manera de hacer esto.

Tiene algunas posibilidades adicionales cuando se usa un editor de código, usted podría color-código, el texto y el formato de código como jsfiddle hace, y tal vez incluso la construcción de algún tipo de código, autocompletado de palabras clave, etc.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: