Rileva la direzione della selezione utente con javascript

Question

Sto emulando l'editor di testo nel mio progetto con il caret personalizzato, ma la selezione nativa. C'è un modo per scoprire in quale direzione l'utente ha selezionato il testo? Diciamo che quell'utente ha selezionato il testo "Ciao mondo". Ci sono due possibilità: potrebbe iniziare facendo clic con il mouse sulla lettera "d" e terminare con la lettera "h", oppure iniziare con la lettera "h" e terminare con la lettera "d". C'è un modo semplice per distinguere tra queste due situazioni? Grazie.

Answer 1

vecchia questione, ma ho pensato che vorrei aggiungere una soluzione più semplice:

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

Per quanto ne so, non esiste alcuna proprietà o evento nativo per Javascript che indicherà la direzione. This site dettagli su come tenere traccia della direzione del mouse, è possibile modificarlo in base alle proprie esigenze.

In sostanza, fino a quando è possibile recuperare la posizione del mouse (o con loc.pageX o Y, o event.clientX o Y), può essere possibile scrivere le proprie funzioni per monitorare la direzione in base alla posizione e il tempo.

Nel tuo caso si sarebbe probabilmente solo desidera acquisire questo quando l'utente ha il testo 'selezionato', vale a dire l'evento mousedown.

Answer 3

traccia la mousedown X offet e poi compensare il mouseup X, e il risultato indica la direzione: (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

Questo dovrebbe funzionare:

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

Nota: se si consente selezioni di nient'altro che rotture e spazi vuoti, è necessario modificare la funzione precedente dal restituirebbe true in tal caso, non importa quale.

Answer 5

stavo cercando di trovare una soluzione che funziona per me per un paio di giorni. Ecco cosa mi è venuta, questo funziona con la selezione singola gamma:

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

Il nodo focus della selezione è sempre dove l'utente rilascia il mouse, ma alla fine gamma e iniziare contenitori cambiano a seconda della direzione.