关于光标定位引发基础知识缺陷

最新推荐文章于 2023-08-09 09:02:21 发布

Dream-Long

最新推荐文章于 2023-08-09 09:02:21 发布

阅读量661

点赞数

本文链接：https://blog.csdn.net/G294992891/article/details/107906281

版权

背景：由于在Safari浏览器浏览器中光标定位引发一列基础知识的缺陷认识。以此，对基础知识整理和练习。

在光标定位时，有个方法是获取光标位置和获取的范围，这个方法就是 window.getSelection()

selection对象

window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。

测试核心代码

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>光标测试</title>
    <style type="text/css">
        .div{ width:600px; height:200px; border:1px solid #CCC}
        .aclick{
            cursor: pointer;
            width: 50px;
            text-align: center;
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $('.aclick').click(function () {
                $('.div').html("回复[潇sdfsdfssssssssssssssdfsdf潇]:" + document.getElementById('content').innerText);
                $('.div').focus();
                po_Last_Div($('.div').get(0));
            })
            document.body.addEventListener("click", getWord, false);
        });


        function po_Last_Div(obj) {
            if (window.getSelection) {//ie11 10 9 ff safari
                obj.focus(); //解决ff不获取焦点无法定位问题
                var range = window.getSelection();
                range.getRangeAt(0)
               // range.selectAllChildren(obj);
                // range.removeAllRanges(); // 取消所有选中区域
               // range.collapseToEnd();
                console.log('removeRange', range.removeAllRanges())

            }
            else if (document.selection) {//ie
                var range = document.selection.createRange(); //创建选择对象
                //var range = document.body.createTextRange();
                range.moveToElementText(obj);//range定位到obj
                range.collapse(false);//光标移至最后
                range.select();
            }
        }

        function getWord() {
            var word = window.getSelection ? window.getSelection() : document.selection.createRange().text;

            console.log('selection', word, '获取当前鼠标点击对象', word.getRangeAt(0), '获取内容', word.toString());
        }


    </script>
    </head>

    <body>
        <div class="aclick">回复</div>
        <div class="div" id="content" contenteditable="true">
        </div>
        <p>
            <textarea name="textfield" cols="50" rows="6">就是现在文本域里有一段文字</textarea>
        </p>
      
    </body>
    </html>

在这里插入图片描述

在鼠标点击文本区域就是会获取到Selection对象里各个值。
在这里插入图片描述
对于一些Selection对象属性不理解先明确一下Selection对象的各个属性的意义。

术语

锚点（anchor）

锚指的是一个选区的起始点。当我们使用鼠标选择一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。

焦点（focus）

选区的焦点是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

范围（range）

范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围。“范围”会被作为range对象返回。Range对象也能通过DOM创建、增加、删减。

属性

anchorNode
返回该选区起点所在的节点
anchorOffset
返回一个数字，表示该选区起点在anchorNode中的位置偏移量。

如果 anchorNode 是文字节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）
如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)

focusNode
返回该选区终点所在的节点。
focusOffset
返回一个数字，表示该选区终点在focusNode中的位置偏移量。

如果 focusNode 是文字节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。
如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
isCollapsed
返回一个布尔值，用于判断选区的起始点和终点是否在同一位置。

rangeCount
返回一个数字，表示该选区所包含的连续范围的数量。一般为1，因为通常情况下用户只能选择一个范围

方法

getRangeAt
返回选区开始的节点（Node）。
因为通常情况下用户只能选择一个范围，所以只有一个选区（range），此方法一般为getRangeAt(0)
collapse(光标落在的目标节点, offset)
将当前的选区折叠为一个点
extend
将选区的焦点移动到一个特定的位置。
modify
修改当前的选区。
collapseToStart
将当前的选区折叠到起始点。
collapseToEnd
将当前的选区折叠到最末尾的一个点。
selectAllChildren
将某一指定节点的子节点框入选区

-addRange
一个区域（Range）对象将被加入选区。

removeRange
从选区中移除一个区域。
removeAllRanges
将所有的区域都从选区中移除。
deleteFromDocument
从页面中删除选区中的内容。
toString
返回当前选区的纯文本内容。

Dream-Long

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
关于光标定位引发基础知识缺陷

背景：由于在Safari浏览器浏览器中光标定位引发一列基础知识的缺陷认识。以此，对基础知识整理和练习。在光标定位时，有个方法是获取光标位置和获取的范围，这个方法就是 window.getSelection()selection对象window.getSelection()，返回一个Selection对象，表示用户选择的文本范围或光标的当前位置。测试核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E
复制链接

扫一扫