Определить направление выбора пользователя с помощью javascript

Question

Я подражаю текстовому редактору в своем проекте с пользовательским каретом, но собственным выбором. Есть ли способ определить, в каком направлении пользователь выбирает текст? Допустим, пользователь выбрал текст «hello world». Есть две возможности: он может начать с щелчка мышью по букве «d» и заканчивается буквой «h», или он может начинать с буквы «h» и заканчивать буквой «d». Есть ли простой способ, как отличить эти две ситуации? Спасибо.

Answer 1

Старый вопрос, но я думал, что я хотел бы добавить простое решение:

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

Насколько я знаю, нет никакого свойства или события, родного Javascript, который скажет вам направление. This site детали, как отслеживать направление мыши, вы можете настроить его на свои нужды.

По существу, до тех пор, пока вы можете получить позицию мыши (либо loc.pageX, либо Y, или event.clientX или Y), вы можете написать свои собственные функции для отслеживания направления, основанного на положении и времени.

В вашем случае вы, вероятно, захотите зафиксировать это, когда пользователь имеет текст «выбрано», то есть на событие mousedown.

Answer 3

отслеживать MouseDown X offet, а затем MouseUp Х смещения, и результат показывает направление: (используя 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

Это должно работать:

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

Примечание. Если вы разрешаете выбор только для разрывов и пробелов, вам необходимо изменить функцию выше, поскольку он возвратил бы true в таком случае, несмотря ни на что.

Answer 5

Я пытался найти решение, которое работает для меня на пару дней. Вот что я придумал, это будет работать с выбором одного диапазона:

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

Упор узел выбора всегда, когда пользователь отпускает кнопку мыши, но конечный диапазон и начать контейнеры изменяются в зависимости от направления.