Detectar la dirección de selección del usuario con javascript

Question

Estoy emulando el editor de texto en mi proyecto con la referencia personalizada, pero la selección nativa. ¿Hay alguna manera de detectar en qué dirección seleccionó el usuario el texto? Digamos que ese usuario ha seleccionado el texto "hola mundo". Hay dos posibilidades, podría comenzar haciendo clic con el mouse en la letra 'd' y terminar en la letra 'h', o podría comenzar con la letra 'h' y finalizar con la letra 'd'. ¿Hay alguna manera fácil de distinguir entre estas dos situaciones? Gracias.

Answer 1

vieja pregunta, pero pensé que me gustaría añadir una solución más fácil:

var sel = getSelection(), 
position = sel.anchorNode.compareDocumentPosition(sel.focusNode), 
backward = false; 
// position == 0 if nodes are the same 
if (!position && sel.anchorOffset > sel.focusOffset || 
    position === Node.DOCUMENT_POSITION_PRECEDING) 
    backward = true; 

Node.compareDocumentPosition (MDN)

Answer 2

Por lo que yo sé, no hay ninguna propiedad o evento nativo de Javascript que le indique la dirección. This site detalla cómo rastrear la dirección del mouse, puede modificarla según sus necesidades.

Esencialmente, siempre que pueda recuperar la posición del mouse (con loc.pageX o Y, o event.clientX o Y), puede escribir sus propias funciones para seguir la dirección en función de la posición y la hora.

En su caso, probablemente solo quiera capturar esto cuando el usuario tenga el texto 'seleccionado', es decir, en el evento mousedown.

Answer 3

rastrear el offet mousedown X y luego el mouseup X offset, y el resultado muestra la dirección: (usando jQuery)

var textSelectionDirection = (function(){ 
    var direction = '', mouseDownOffset = null; 

    function getDirection(e){ 
     if(e.type == 'mousedown') 
      mouseDownOffset = e.clientX; 
     else if(e.type == 'mouseup'){ 
      direction = e.clientX < mouseDownOffset ? 'left' : 'right'; 
      console.log(direction); 
     } 
    } 

    return getDirection 
})(); 

$(document).on('mousedown mouseup', textSelectionDirection); 

DEMO: http://jsfiddle.net/ffumv/

Answer 4

esto debería funcionar:

function isBackwards(sel) { 
    var rg = document.createRange(); 
    rg.setStart(sel.anchorNode, sel.anchorOffset); 
    rg.setEnd(sel.focusNode, sel.focusOffset); 
    return !rg.toString(); 
} 

Nota: Si permite selecciones de nada más que pausas y espacios en blanco, debe modificar la función anterior, ya que Devolvería true en tal caso, sin importar qué.

Answer 5

yo estaba tratando de encontrar una solución que funciona para mí durante un par de dias. Esto es lo que me ocurrió, esto va a funcionar con la selección de rango único:

var selection = window.getSelection(); 
var range = selection.getRangeAt(0); 
var isSelectionDown = selection.focusNode === range.endContainer; 
var isSelectionUp = selection.focusNode === range.startContainer; 

El nodo foco de selección siempre que el usuario suelta el ratón, pero el límite superior del rango y empezar contenedores cambian en función de la dirección.