Phát hiện hướng lựa chọn người dùng bằng javascript

Question

Tôi đang mô phỏng trình soạn thảo văn bản trong dự án của tôi với dấu mũ tùy chỉnh, nhưng chọn gốc. Có cách nào để phát hiện người dùng đã chọn văn bản theo hướng nào? Giả sử người dùng đó đã chọn văn bản "hello world". Có hai khả năng, anh ta có thể bắt đầu bằng cách nhấp chuột vào chữ 'd' và kết thúc bằng chữ 'h', hoặc anh ta có thể bắt đầu bằng chữ 'h' và kết thúc bằng chữ 'd'. Có cách nào dễ dàng để phân biệt giữa hai tình huống này không? Cảm ơn bạn.

Answer 1

Cũ câu hỏi, nhưng tôi nghĩ rằng tôi muốn thêm một giải pháp dễ dàng hơn:

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

Theo như tôi biết, không có thuộc tính hoặc sự kiện nào có nguồn gốc Javascript sẽ cho bạn biết hướng đi. This site chi tiết cách theo dõi hướng chuột, bạn có thể tinh chỉnh nó theo nhu cầu của mình.

Về cơ bản, miễn là bạn có thể truy xuất vị trí chuột (với loc.pageX hoặc Y hoặc event.clientX hoặc Y), bạn có thể viết các chức năng của riêng mình để theo dõi hướng dựa trên vị trí và thời gian.

Trong trường hợp của bạn, bạn có thể chỉ muốn nắm bắt điều này khi người dùng có văn bản 'đã chọn', tức là trên sự kiện mousedown.

Answer 3

theo dõi offet mousedown X và sau đó là mouseup X bù đắp, và kết quả cho thấy sự chỉ đạo: (sử dụng 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

này nên làm việc:

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

Lưu ý: Nếu bạn cho phép lựa chọn không có gì ngoài các khoảng ngắt và khoảng trống, bạn cần phải sửa đổi chức năng ở trên vì nó sẽ trả về true trong trường hợp này, bất kể là gì.

Answer 5

Tôi đã cố gắng để tìm một giải pháp mà làm việc cho tôi cho một vài ngày. Dưới đây là những gì tôi đã đưa ra, điều này sẽ làm việc với nhiều lựa chọn duy nhất:

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

Nút trọng tâm của sự lựa chọn luôn nơi người dùng nhả chuột, nhưng khi kết thúc loạt và bắt đầu container thay đổi tùy thuộc vào hướng.