seleccionar - Usar la posición del cursor del mouse como un punto de inicio de rango en CoffeeScript/JavaScript
saber la posicion del cursor en un textbox javascript (2)
Como dice el título, me gustaría utilizar la posición de mi cursor como el punto de inicio de un rango.
Ahora mismo tiene una muestra simple como esta
<html>
.
.
<p>The quick brown fox jumps over the lazy dog</p>
.
.
</html>
En el lado CS / JS de las cosas, tengo un evento de escuchar el movimiento del mouse que intenta imprimir el desplazamiento para la posición del cursor, sin embargo, no estoy usando el método correcto y termino siendo undefined o no method error .
De nuevo, CS realmente simple por el momento ya que realmente solo quería probarlo.
$(document).ready ->
$(document).mousemove ->
target = event.target
console.log("#{target.offset()}") // also tried .rangeOffset .offset
Idealmente, me gustaría algo que pueda ingresar en una función range.setStart() .
Por ejemplo, si tuviera que desplazarme sobre el f en zorro, me gustaría que el desplazamiento se devuelva como 16, de modo que pueda establecer el inicio del rango como range.setStart(target,16) .
Cualquier ayuda que me establezca en la dirección correcta sería muy apreciada.
editar: Después de escribir esto y enviarlo, me di cuenta de lo tonto que era esperar que el elemento me devolviera la información de compensación. Estoy terriblemente perdido, por favor guíame.
Deberías usar pageX o pageY, como este
$(document).ready ->
$(document).mousemove (e) ->
console.log("#{e.pageX}")
console.log("#{e.pageY}")
Si necesita obtener el puesto relativo a un div, por ejemplo
$(document).ready ->
$(document).mousemove (e) ->
console.log("#{e.pageX - $(''#divID'').offset().left}")
console.log("#{e.pageY - $(''#divID'').offset().top}")
Aplicado a su caso, le daría algo como esto
$(document).ready ->
$(''p'').mousemove (e) ->
console.log("#{e.pageX - $(''p'').offset().left}")
console.log("#{e.pageY - $(''p'').offset().top}")
Y mover el mouse sobre el párrafo que contiene el texto le dará la posición del mouse dentro del párrafo
verlo trabajando aquí http://jsfiddle.net/zXnk9/
EDITAR
Si necesita obtener el índice del personaje que está flotando, podría usar un truco como ese:
Envuelva su texto dentro de un contenedor que sea exactamente el ancho de su texto
<span>The quick brown fox jumps over the lazy dog</span>
Y luego haga el siguiente cálculo
$(document).ready ->
// define the container for the text you are intersted in
container = $(''span'')
// on mouseover
container.mouseover (e) ->
// get container width
container_width = container.width()
// compute the avg character width base on the container width and the number of characters contained in your text.
// (If you have some complex formatting inside your container, you would have to adjust this calculation.)
char_width = p_width / container.text().length
// get the position of your mouse inside
position_inside = e.pageX - container.offset().left
// define the index of the character you are interested in
char_index = Math.floor(position_inside / char_width) - 1
// use it as you wish
// print it for example
console.log("#{char_index}")
Puede verificarlo trabajando aquí. He configurado el evento para que haga clic para que pueda probarlo con precisión en la f de fox, devuelve 16. http://jsfiddle.net/zXnk9/1/
EDIT 2: para una manera confiable de hacer lo que estás tratando de hacer
Al cargar el documento, coloque cada carácter dentro del contenedor en un nodo html, como este
$(document).ready ->
// set your container
container = $(''span'')
// define a replacement text string
replacement_container_text = ''''
// iterate over each character inside your container
$(container.text().split('''')).each (i, char) ->
// put it inside a span and add it to your replacement text string
replacement_container_text += ''<span>'' + char + ''</span>''
// set the replacement text string as the html content of your container
// this replaces the original text with the initial text with each
// character wrapped into a span
// (which can then be caught as targets for your mousemove events)
container.html(replacement_container_text)
Luego puede obtener el índice del personaje en el que su mouse está ubicado con la siguiente
container.mousemove (e) ->
range_start = container.children(''span'').index $(e.target)
console.log(range_start)
Esto funcionará con contenedores de varias líneas, con párrafos, etc.
Ver ejemplo de trabajo http://jsfiddle.net/2TBFV/
Después de mucho Google y muchas horas de solución de problemas, finalmente se me ocurrió una solución que funciona para mis propósitos.
La función document.caretPositionFromPoint() o para Webkit document.caretRangeFromPoint() toma las coordenadas X e Y de un evento y devuelve una posición de intercalación que luego puedo usar para crear el punto de inicio de mi rango.
$(document).ready ->
setRange = (event) ->
if document.caretPositionFromPoint
#for Firefox
else if document.caretRangeFromPoint
range = document.caretRangeFromPoint(event.pageX, event.pageY)
targetNode = range.startContainer
offset = range.startOffset
range.setStart(targetNode, offset)
range.setEnd(targetNode, 10) #just to test
sel = window.getSelection()
sel.removeAllRanges()
sel.addRange(range)
element = document.getElementById("content")
element.addEventListener(''mousemove'', setRange, true) #eventlistener instead of .mousemove for event bubbling