在平时阅读文章的时候,经常会碰到喜欢的文字段落,想要复制或者转达,今天就要来模拟一个获取用户选中文的文字的展示效果,具体如下:
用户选中一段文字后,获取到用户选中的文字,并展示出来,我们先来分析一下实现思路。
- 一段用来展示文字
- 一个用来放置选中文字的容器
- 获取选中的文字并显示
- 点击非文字部分,取消展示
首先是要实现基本的结果,来展示文字和放置选中文字的容器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } p{ margin: 100px; width: 300px; } #share{ background-color: deepskyblue; width: 150px; color: orangered; position: absolute; display: none; } </style> </head> <body> <p id="word">全栈工程师的沟通成本几乎为零,因为各种技术都懂,胸有成竹,自己就全做了。即使是在团队协作中,与不同技术人员的沟通也会容易得多,让一个后端和一个前端去沟通,那完全是鸡同鸭讲,更不用说设计师与后端了。但如果有一个人懂产品懂设计懂前端懂后端,那沟通的结果显然不一样,因为他们讲的,彼此都能听得懂。</p> <div id="share"></div> </body> </html>
在上面我们,我们生成了一段文字,并写了一个用来存在选中文字的容器#share,因为需要根据选中文字时鼠标最后的位置来确定显示文字的位置,并且在没有选中文字时不显示,所以给了该容器一个定位,并且默认添加隐藏属性。
接下来就是获取选中的文字了并展示了。
<script> window.onload = function () { function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } //监听鼠标抬起 $("word").onmouseup = function (event) { var e = event || window.event; // 获取选中的文字 var selectedText; if(window.getSelection){ // 标准模式 selectedText = window.getSelection().toString(); }else{ // IE 系列 selectedText = document.selection.createRange().text; } if(selectedText !== ""){ $("share").innerText = selectedText; $("share").style.display = 'block'; $("share").style.left = e.clientX + 'px'; $("share").style.top = e.clientY + 'px'; } } } </script>
要获取选中文字,就需要用到window.getSelection(),选中时鼠标按下,当选中结束时鼠标才抬起,所以需要监听鼠标的抬起事件;这里是为了展示选中的内容,所以只有当选中的内容不为空时展示容器才显示,这也是为了区分鼠标点击其他地方后抬起的事件。
既然要展示,就也会有隐藏,当鼠标点击任何非展示容器的地方时,都应该隐藏展示容器。
<script>//监听文档的点击 document.onmousedown = function (event) { var e = event || window.event; var targetId = e.target ? e.target.id : e.srcElement.id; if(targetId !== "share"){ $("share").style.display = "none"; } } </script>
现在,基本功能已经实现了,我们也可以自己根据需求将代码稍作修改,换成分享按钮等等,但是需要注意的一个问题是,既然是要选中文字,就要避免拖拽选中事件的发生,所以我们还需要对上面的代码进行优化,具体的如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } p{ margin: 100px; width: 300px; } #share{ background-color: deepskyblue; width: 150px; color: orangered; position: absolute; display: none; } </style> </head> <body> <p id="word">全栈工程师的沟通成本几乎为零,因为各种技术都懂,胸有成竹,自己就全做了。即使是在团队协作中,与不同技术人员的沟通也会容易得多,让一个后端和一个前端去沟通,那完全是鸡同鸭讲,更不用说设计师与后端了。但如果有一个人懂产品懂设计懂前端懂后端,那沟通的结果显然不一样,因为他们讲的,彼此都能听得懂。</p> <div id="share"></div> <script> window.onload = function () { function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } //监听鼠标抬起 $("word").onmouseup = function (event) { var e = event || window.event; // 获取选中的文字 var selectedText; if(window.getSelection){ // 标准模式 selectedText = window.getSelection().toString(); }else{ // IE 系列 selectedText = document.selection.createRange().text; } if(selectedText !== ""){ $("share").innerText = selectedText; $("share").style.display = 'block'; $("share").style.left = e.clientX + 'px'; $("share").style.top = e.clientY + 'px'; } }; //监听文档的点击 document.onmousedown = function (event) { var e = event || window.event; var targetId = e.target ? e.target.id : e.srcElement.id; if(targetId !== "share"){ $("share").style.display = "none"; } window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); } } </script> </body> </html>
下载完整详细的代码:点这里