使用javascript檢測用戶選擇的方向

我正在使用自定義插頁來模擬我的項目中的文本編輯器，但本機選擇。有什麼方法可以檢測用戶選擇文本的方向嗎？可以說，那個用戶選擇了文本「hello world」。有兩種可能性，他可以先在字母'd'上點擊鼠標並以字母'h'結尾，或者可以從字母'h'開始並以字母'd'結尾。有沒有簡單的方法來區分這兩種情況？謝謝。使用javascript檢測用戶選擇的方向

來源

2012-02-07 Ondra

我不認爲這個選擇對象足夠聰明。你必須記錄鼠標點擊的位置，並自己解決這個問題。 – 2012-02-07 16:57:45

@Diodeus做出答案，讓他可以接受它。並且（at）OP通過使用默認值並添加鼠標位置計算，嘗試併爲這些操作添加自定義設置器和獲取器。 – Relic 2012-02-07 17:02:37

這是可能的。 https://stackoverflow.com/a/12652116/96100 – 2017-11-01 12:26:14

老問題，但我想我會添加一個簡單的解決方案：

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）

來源

2014-05-07 08:31:20 willlma

據我所知，沒有任何屬性或事件的Javascript本地會告訴你的方向。 This site詳細介紹如何跟蹤鼠標方向，您可以根據自己的需求調整它。基本上，只要您可以檢索鼠標位置（使用loc.pageX或Y或event.clientX或Y），您可以編寫自己的函數以根據位置和時間跟蹤方向。

在您的情況下，您可能只想在用戶選擇文本時（即在mousedown事件中）捕獲此內容。

來源

2012-02-07 17:03:33 Igor

謝謝，我很害怕，我將不得不這樣做:) – Ondra 2012-02-08 08:46:03

這是可能的。 https://stackoverflow.com/a/12652116/96100 – 2017-11-01 12:29:48

@TimDown當然，這是可能的，我提供的鏈接有一種方法。沒有一個* native *函數/屬性（例如window.mouseDirection）給你;你需要製作自定義代碼，就像你的例子。 – Igor 2017-11-01 13:56:53

跟蹤鼠標按下X offet然後鼠標鬆開的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/

來源

2012-10-20 08:15:14 vsync

此目前僅適用於鼠標選擇而不適用於鍵盤 – vsync 2012-10-20 16:22:19

這應該工作：

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

注意：如果您允許選擇除空格和空格之外的任何內容，則需要修改上述函數，因爲在這種情況下，它會返回true，無論如何。

來源

2013-04-28 17:46:27 user1521685

不適用於單個文本節點。僅在起始和結束節點不相同時才起作用。 – Jordan 2014-07-23 10:24:35

我試圖找到這對我的工作的一對夫婦的解決方案天。以下是我想出了，這將與單個範圍選擇工作：

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

選擇的重點節點總是在用戶釋放鼠標，但最終範圍和容器變化取決於方向開始。

來源

2016-10-10 10:12:04 RenaldasK

僅當選擇跨越多個節點時纔有效。如果不是問題，則可以簡化爲：var isReverse = selection。anchorNode！== selection.getRangeAt（0）.startContainer;' – Pocketsand 2017-09-03 20:01:20

使用javascript檢測用戶選擇的方向

回答

相關問題