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:
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).
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.
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.
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
0