发布于 3个月前

getClientRects应用举例

上一节我们介绍了getClients的用法,今天我们学习一个简答的应用场景

需求:

我在一篇文章中选中一段文字,然后在文字的下方弹出一个简单的浮动按钮。

思路分析:

1、按钮需要浮动,首先我想到的是在文档中使用一个元素来作为按钮,这个元素我采用绝对定位,当我知道选择区域的大概位置的时候,根据位置修改元素的top和left值,就可以啦。

2、按钮元素最好首先将top和left的位置放置于文档的视口外部,这个我使用比较大的负值就可以啦。

3、如果知道我们选中区域的位置是我们本文的重点,也是本文的主题所在。

实现步骤代码:

<!doctype html>
<style>
    .comment {
        width: 35px;
        height:35px;
        background:#FFF;
        position:absolute;
        top: -500px;
        left:-500px;
    }
    button {
        width: 100%;
        height:100%;
    }
</style>
<body>
<p id="p">Select me: <i>italic</i> and <b>bold</b></p>

From <input id="from" disabled> – To <input id="to" disabled>
<script>

  document.onselectionchange = function(e) {
    let {anchorNode, anchorOffset, focusNode, focusOffset} = document.getSelection();
    let selection = document.getSelection();
    let range = selection.getRangeAt(0);
    const clientRects = range.getClientRects();
    let divElement = document.getElementById('comment');
    if (clientRects.length ==0) {
        divElement.style.top = '-500px';
        divElement.style.left = '-500px';
        return;
    }
    divElement.style.top = (clientRects[0].top+20)+'px';
    divElement.style.left = clientRects[0].left+'px';

  };
</script>
<div id="comment" class="comment">
   <button>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M4 1.5h12A3.5 3.5 0 0 1 19.5 5v8l-.005.192a3.501 3.501 0 0 1-2.927 3.262l-.062.008v1.813a1.5 1.5 0 0 1-2.193 1.33l-.371-.193-.38-.212a13.452 13.452 0 0 1-3.271-2.63l-.062-.07H4A3.5 3.5 0 0 1 .5 13V5A3.5 3.5 0 0 1 4 1.5ZM4 3a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h6.924a11.916 11.916 0 0 0 3.71 3.081l.372.194v-3.268L14.962 15H16a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H4Zm1.55 5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm4.5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Zm4.5 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z"></path>
        </svg>
    </button>
</div>
</body>

思路分析:

1、在文档中放置了一个div元素,id和class设置为comment,将它们设置为绝对定位,同时将它们的位置放到视口以外。

2、我们监听document.onselectionchange事件,第一步是获取选择的区域,这个可以根据document.getSelection();

3、我们得到选择区域的范围(range),这里需要注意的是,这里的范围有的浏览器有一个值,有的浏览器有多个值,这里我只需要第一个值就可以啦

4、调用range的getClientRects方法,注意,这个方法返回一个数组,我只需要第一个数组的值就足够,因为我只拿第一个DomRect的top和left

5、如果这个range没有值,或者即使有值,但是选中的range的宽度为0 ,这些情况直接返回就可以啦

实现的效果如上图所示。欢迎讨论

</body>

相关文章

©2020 edoou.com   京ICP备16001874号-3