使用JavaScript检测用户选择的方向

Question

我在我的项目中使用自定义光标模拟文本编辑器，但使用原生选区。有没有办法检测用户选择文本的方向？举个例子，用户选择了文本“hello world”。他可以从点击字母“d”开始，结束于字母“h”，或者从字母“h”开始，结束于字母“d”。有没有简单的方法来区分这两种情况？谢谢。

- Ondra

---

我认为选择对象对此不够智能。您需要记录鼠标点击位置并自行解决这个问题。 - Diodeus - James MacFarlane

@Diodeus 把那个作为回答，这样他就可以接受了。并且，(at)OP 尝试使用默认值和增加鼠标位置计算来添加自定义的设置器和获取器，以便执行这些操作。 - Eric Hodonsky

这是可能的。https://dev59.com/rWnWa4cB1Zd3GeqPwAAg#12652116 - Tim Down

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)

- willlma

Answer 2

据我所知，JavaScript本身没有可以告诉您鼠标方向的属性或事件。这个网站详细介绍了如何跟踪鼠标方向，您可以根据自己的需要进行调整。

基本上，只要您能够检索到鼠标位置（使用loc.pageX或Y，或event.clientX或Y），您就可以编写自己的函数来根据位置和时间跟踪方向。

在您的情况下，您可能只想在用户选择文本时捕获它，即在mousedown事件上。

- Igor

---

谢谢，我担心我不得不这样做 :) - Ondra

@TimDown 当然可以，而我提供的链接有一种方法。只是没有一个本地的函数/属性（例如window.mouseDirection）可以给你它；你需要像你的例子中那样编写自定义代码。 - Igor

Answer 3

我试图寻找适合我的解决方案已经几天了。以下是我想出的解决方案，它可以用于单个范围选择：

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

选择的焦点节点始终是用户释放鼠标的位置，但范围的起始和结束容器根据方向而变化。

- RenaldasK

---

仅当选择跨越多个节点时才起作用。如果不是问题，则可以缩小为：var isReverse = selection.anchorNode！==选择getRangeAt（0）。startContainer; - Pocketsand

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，无论如何。

- user1521685

---

仅当开始节点和结束节点不同步时才起作用，不要在单个文本节点中工作。 - Jordan

Answer 5

追踪mousedown的X轴偏移，然后再追踪mouseup的X轴偏移，结果显示方向：（使用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);

演示: http://jsfiddle.net/ffumv/

- vsync

---

目前此功能只能用鼠标选择，无法使用键盘。 - vsync