当前位置：首页 > article >正文

【前端基础】如何判断鼠标选中文本的方向

article 2025/1/21 0:00:16

鼠标选中文本的方向，分两种，从左往右，和从右往左。其中涉及到选中区域可能跨行的问题，稍微有点复杂。经过苦思冥想终于找到一个比较完美的方法判断鼠标选择的方向，亲们，有没有简单的办法可以分享给我！

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本编辑器</title>
    <style>
        #editor {
            border: 1px solid #ccc;
            min-height: 200px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="editor" contenteditable="true">
        我是一段测试文本
    </div>

    <script>
        document.addEventListener('mouseup', () => {
            const s = window.getSelection();
            if (s.toString().length > 0) {
                const range = s.getRangeAt(0)
                const endContainer = range.endContainer
                // range不分前后
                const selectedNode = endContainer
                if(s.anchorNode == s.focusNode) {
                	if(s.anchorOffset > s.focusOffset) {
                    	leftToRight = false;
                	}else {
                    	leftToRight = true;
                    }
                } else if(selectedNode == s.anchorNode) {
                    leftToRight = false;
                } else if(selectedNode == s.focusNode) {
                    leftToRight = true;
                }
                console.log('鼠标选择的方向：')
                console.log(leftToRight ? '从左到右' : '从右到左')
            }
        });
    </script>
</body>
</html>