js中的Range

小百菜

已于 2022-02-23 17:33:46 修改

阅读量5k

点赞数 2

分类专栏： Javascript

于 2022-02-15 17:09:08 首次发布

本文链接：https://blog.csdn.net/u014644574/article/details/122948442

版权

JavaScript 文本操作光标位置 Range对象 Selection接口

关键词由CSDN通过智能技术生成

Javascript 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

删除文本

<div id="div">这里是第一段文字</div>
<button onclick="del()">删除</button>
<script>
    function del() {
        var div = document.getElementById("div");
        var content = div.firstChild;
        if (content.nodeType == 3) {//node节点类型必须是text
            var range = document.createRange();
            range.setStart(content, 1);
            range.setEnd(content, 7);
            range.deleteContents();
        }
    }
</script>

选择文本

<div id="div">这里是第一段文字</div>
<button onclick="sel()">选择</button>
<script>
    function sel() {
        var div = document.getElementById("div");
        var content = div.firstChild;
        if (content.nodeType == 3) {//node节点类型必须是text
            var range = document.createRange();
            range.setStart(content, 1);
            range.setEnd(content, 7);
            //range.deleteContents();//删除
            var sel = window.getSelection();
            sel.addRange(range);
        }
    }
</script>

设置光标位置（IE浏览器）

节点类型为 input 或者 textarea

<input type="text" id="text1" value="1234567890">
<select onchange="setPos(this.selectedIndex)">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<script language="javascript">
    function setPos(num) {
        var range = document.getElementById("text1").createTextRange();//CreateTextRange是 Microsoft IE特定功能
        range.moveStart('character', num);
        range.collapse(true);
        range.select();
    }
</script>

设置光标位置、选择指定文本

节点类型为 input 或者 textarea

<input type="text" id="test" value="1234567890">
<button onclick="caret(3,5)">光标</button>
<br>
<br>
<script>
    function caret(begin, end) {
        var node = document.getElementById("test");
        if (!node) return;
        if (node.setSelectionRange) { //现代浏览器
            node.focus();
            node.setSelectionRange(begin, end);
        } else if (node.createTextRange) { //IE678
            var range = node.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', begin);
            range.select();
        }
    }
</script>

Range是一个抽象的接口，具有起始位置和结束位置。如果起始位置等于结束位置，则形成光标。
其中Range.collapse(bool)就是让起始位置和结束位置重合，bool=true(默认值)，在起始位置重合；bool=false，在结束位置重合。
Range.select()就是选择文本。

js获取光标位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="div">你好啊123456789</div>
<script>
    var range = document.createRange();
    //监听鼠标移动
    //整个页面使用document
    //'.btn-wrap,.mod-titlt,.top-wrap'
    $('#div').mousemove(function (event) {
        //2.计算坐标
        var event = event || window.event;
        var x = event.clientX;
        var y = event.clientY;
        var oPoint = document.elementFromPoint(x, y);

        let textContent = oPoint.textContent;
        var content = $('#div')[0].firstChild;
        //var range = document.createRange();
        var sel = window.getSelection();
        for (let i = 0; i < textContent.length; i++) {
            range.setStart(content, i);
            range.setEnd(content, i);
            sel.addRange(range);
            console.log(event.clientX)
            let selectionCoords = getSelectionCoords();
            if (selectionCoords >= x) {
                range.setStart(content, i);
                range.setEnd(content, i + 1);
                sel.addRange(range);
                console.log(i)
                break;
            }
        }

    });

    function getSelectionCoords(win) {
        win = win || window;
        var doc = win.document;
        var sel = doc.selection, range, rects, rect;
        var x = 0, y = 0;
        if (sel) {
            if (sel.type != "Control") {
                range = sel.createRange();
                range.collapse(true);
                x = range.boundingLeft;
                y = range.boundingTop;
            }
        } else if (win.getSelection) {
            sel = win.getSelection();
            if (sel.rangeCount) {
                range = sel.getRangeAt(0).cloneRange();
                if (range.getClientRects) {
                    range.collapse(true);
                    rects = range.getClientRects();
                    if (rects.length > 0) {
                        rect = rects[0];
                    }
                    // 光标在行首时，rect为undefined
                    if(rect){
                        x = rect.left;
                        y = rect.top;
                    }
                }
                // Fall back to inserting a temporary element
                if ((x == 0 && y == 0) || rect === undefined) {
                    var span = doc.createElement("span");
                    if (span.getClientRects) {
                        // Ensure span has dimensions and position by
                        // adding a zero-width space character
                        span.appendChild( doc.createTextNode("\u200b") );
                        range.insertNode(span);
                        rect = span.getClientRects()[0];
                        x = rect.left;
                        y = rect.top;
                        var spanParent = span.parentNode;
                        spanParent.removeChild(span);

                        // Glue any broken text nodes back together
                        spanParent.normalize();
                    }
                }
            }
        }
        // return { x: x, y: y };
        return x;
    }
</script>
</body>
</html>