Dom Range 获取选中元素，window.getSelection 配合 range 选中内容

最新推荐文章于 2023-06-30 14:43:50 发布

ma_xs

最新推荐文章于 2023-06-30 14:43:50 发布

阅读量2.8k

点赞数

分类专栏： jquery js 文章标签： range window.getSelection selection.addRange addRange dom range

本文链接：https://blog.csdn.net/hai2653068/article/details/103072898

版权

jquery 同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

range 获取选中元素，window.getSelection 配合 range 选中内容

实例代码：


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo ： Textarea 元素的光标位置</title>
    <style>
        #result {
            font-size:18px;
            line-height:25px;
            padding-left:20px;
        }
        #test{
            width: 500px;
            height: 300px;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>

<h1>Textarea Div  元素的光标位置</h1>
<ul>
    <li>获取 Textarea Div   元素当前的光标位置</li>
    <li>设置回原先的 Textarea Div   元素的光标位置</li>
    
</ul>

<form action="#">
    <div id="test" contenteditable="true">1234567891326548946</div>
    <p>
        <input type="button" id="get" value="Get Cursor Position"/>
        <input type="button" id="set" value="Set Cursor Position"/>
    </p>
</form>

<h2>Textarea Range：</h2>
<div id="result"></div>

<script type="text/javascript">


    var cursorPosition = {
        get: function (textarea) {
            var setSelectionRange = getSelection().getRangeAt(0);
            var rangeData = {text: "", start: 0, end: 0 };
            if (setSelectionRange) { // W3C
                textarea.focus();
                rangeData.start= setSelectionRange.startOffset;
                rangeData.end = setSelectionRange.endOffset;
                rangeData.text = (rangeData.start != rangeData.end) ? textarea.innerText.substring(rangeData.start, rangeData.end): "";
            }
            return rangeData;
        },

        set: function (textarea, rangeData) {

            try{
                var content=textarea.firstChild;
                var selection = window.getSelection();
                try{
                    var range =  selection.getRangeAt(0);
                    range.setStart(content,rangeData.start);
                    range.setEnd(content,rangeData.end);
                }catch (e1) {
                    range=document.createRange();
                    range.setStart(content,rangeData.start);
                    range.setEnd(content,rangeData.end);
                    selection.addRange(range);
                }

            }catch (e) {
                console.log(e);
            }
        },


    }


    var tx=document.getElementById("test"),
        re=document.getElementById("result"),
        pos;

    document.getElementById("get").onclick = function(){
        pos = cursorPosition.get(tx);
        re.innerHTML=("<strong>Range :</strong> (" + pos.start + ", " + pos.end + ")<br /><strong>Text :</strong> " + (!pos.text ? '//--': pos.text));
    }

    document.getElementById("set").onclick = function(){
        cursorPosition.set(tx, pos);
    }


</script>

</body>
</html>

参考资料：

https://www.w3school.com.cn/xmldom/dom_range.asp

https://developer.mozilla.org/zh-CN/docs/Web/API/Range

https://www.w3cschool.cn/fetch_api/fetch_api-tij22wqq.html

ma_xs

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Dom Range 获取选中元素，window.getSelection 配合 range 选中内容

range 获取选中元素，window.getSelection 配合 range 选中内容实例代码：<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="te...
复制链接

扫一扫