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 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);

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();
}

注意：如果你只允许选择除了break和whitespace之外的东西，你需要修改上面的函数，因为在这种情况下它会返回true，无论如何。

Answer 5

我试图找到适合我的解决方案几天。这是我想出的，这将适用于单一范围选择：

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

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

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

5 个答案: