JavaScript - Derectar en que parte del texto hace clic el usuario.

 
Vista:
Imágen de perfil de Marco
Val: 5
Ha disminuido su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Derectar en que parte del texto hace clic el usuario.

Publicado por Marco (3 intervenciones) el 05/10/2017 11:19:25
El caso es que estoy creando una plataforma de chat para una aplicación llamada Amino, la qual no permite el uso del teclado de movil en textarea o text input.

Por lo tanto he creado un teclado digital que reemplace el teclado de movil escribiendo sobre un div con innerHTML

Hasta ahora todo funciona correctamente
Escribe, borra, cambia de mayusculas a minusculas, puedes seleccionar texto...
Tal y como lo haría un teclado Android normal.

PERO! (aqui llega el problema)

No se como hacer para decirle que detecte donde quiere poner el usuario la barra de escribir cuando pulsa sobre el texto. Me explico...

Para detectar cuando el usuario selecciona un texto o simplemente pulsa sobre el texto le puse un "onmouseup" en el div que activa la siguiente función:

1
2
3
4
5
6
7
8
function seleccionar(ab, ac) {
        var selObj = (window.getSelection() + 'a');
        if(selObj.length > 1){
            //significa que ha seleccionado un texto
        }  else {
            //significa que solo ha pulsado encima
        }
    }

Y para saber donde está escribiendo guardo el contenido del div en una variable, agrego el carácter "|" antes de empezar. La separo por donde está el carácter y agrego la letra que pulsó el usuario justo detrás (lav|dora => lava|dora).

1
2
3
4
function teclavirtual(letra){
        var contexto = document.getElementById('escribir').innerHTML.split("|");
        document.getElementById('escribir').innerHTML = contexto[0] + letra.innerHTML + "|" + contexto[1];
    }

Si selecciona un trozo de texto ya me hago mas o menos una idea de que tendré que eliminar la barra, contar las secciones y hacer lo mismo con el primer o último resultado.

Pero mi pregunta es:



Como puedo saber en que parte del texto ha pulsado para mover ahí el caracter "|" si no selecciona ningún fragmento de texto? Porque no encuentro la forma de detectar la longitud de caracteres respecto al click.
En todo caso se que se puede saber la posición del ratón respecto al div, pero los caracteres como 'm' son mas largos que caracteres como 'i'

Necesito ayuda de un experto.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de abzerox
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Derectar en que parte del texto hace clic el usuario.

Publicado por abzerox (130 intervenciones) el 06/10/2017 03:08:19
Hola, no se si sea una solución viable o eficiente, ya que deberias hacer algunos cambios a la hora de agregar los caracteres en el div, pero igual te comento. Lo que podrias hacer es cada caracter ingresado envolverlo dentro de un elemento ya sea (SPAN, I) y luego agregar el manejador de evento al elemento padre (DIV) y capturar el target en cada uno de los hijos, para determinar cual de estos es la letra sobre la que se hizo click. Luego deberias jugar un poco el objeto (event) para determinar la coordenada en X y dependiendo tambien del ancho del div (el cual estara definido por la letra) poder calcular si la barra '|' ira delante o después del caracter.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
Imágen de perfil de Marco
Val: 5
Ha disminuido su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Derectar en que parte del texto hace clic el usuario.

Publicado por Marco (3 intervenciones) el 06/10/2017 06:42:32
YEAH!!! No se me había ocurrido
De hecho así me va mejor, hice una prueba rápida y me sorprendió que funcionara tan bien!

MUCHÍSIMAS GRACIAS! Eres un crack!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar