Detect direction of user selection with javascript

Question

I am emulating text editor in my project with custom caret, but native selection. Is there any way how to detect in which direction did user select the text? Lets say, that

Answer 1

This should work:

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

Note: If you allow selections of nothing but breaks and whitespace you need to modify above function since it would return true in such a case, no matter what.

Answer 2

track the mousedown X offet and then the mouseup X offset, and the result shows the direction: (using 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 3

Old question, but I thought I'd add an easier solution:

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 4

I was trying to find a solution that works for me for a couple of days. Here is what I came up with, this will work with single range selection:

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

The focus node of selection is always where the user releases the mouse, but the range end and start containers change depending on direction.

Answer 5

As far as I'm aware there is no property or event native to Javascript that will tell you the direction. This site details how to track mouse direction, you can tweak it to your needs.

Essentially, as long as you can retrieve the mouse position (with either loc.pageX or Y, or event.clientX or Y), you may be able write your own functions to track the direction based on position and time.

In your case you'd probably only want to capture this when the user has text 'selected', ie on the mousedown event.