Correction status:Uncorrected
Teacher's comments:
这个例子简单,主要使用了window.getSelection().toString(); 将选中文本转换成一个字符串 然后获取鼠标位置,鼠标按键弹起时触发事件,然后可以点击复制与搜索
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>仿百度文库的中文搜索效果</title> <style type="text/css"> div{ width: 400px; height: 500px; margin: 10px auto; } button{ border: none; color: #ccc; background: #fff; } button:hover{ color: red; } p{ display: none; position: fixed; top: 0; left: 0; } </style> </head> <body oncontextmenu = "return false" > <div onmouseup="change(event)">2018年是贯彻十九大精神的开局之年,是改革开放40周年,是决胜全面建成小康社会、实施“十三五”规划承上启下的关键一年。2019年是新中国成立70周年,是全面建成小康社会、实现第一个百年奋斗目标的关键之年。 关键时期,必须乘势而上,让改革成为发展的强大引擎。 到2020年,要在重要领域和关键环节改革上取得决定性成果,完成党的十八届三中全会确定的改革任务,形成系统完备、科学规范、运行有效的制度体系,使各方面制度更加成熟更加定型。 关键时期,必须快马加鞭,改革还要不断攻城拔寨。</div> <p id="menu"> <button type="button" name="button"onclick="copyTest()">复制</button>|<button type="button" name="button"onclick="getSearch()">搜索</button> </p> <script type="text/javascript"> function getSelect(){ //返回一个selection对象,用于表示用户选择的文本范围 return window.getSelection().toString(); //返回选中的文本,并且将返回的文本转换成一个字符串 } function change(event){ var e=event||window.event; var str=getSelect(); if(str.length>0){ var x=e.clientX; var y=e.clientY; var menu=document.getElementById('menu'); menu.style.left=x+'px'; menu.style.top=y+'px'; menu.style.display='block'; } else { menu.style.display='none'; } } //复制 function copyTest(){ //将当前选中区域复制到剪贴板 document.execCommand("Copy"); //点击隐藏 document.getElementById('menu').style.display='none'; } //搜索 function getSearch(){ // 如果有值 就搜索 if(getSelect()){ window.location.href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect(); } } </script> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结:
1:getSelection() 返回一个getSelection对象,用于表示用户选择的文本范围,可以通过toString方法转换成字符串
2:获取鼠标位置,触发事件 控制按钮位置与是否显示 position: fixed 按钮使用了固定定位
3:复制: document.execCommand("Copy")方法 处理HTML时长用到 调用execCommand()可以实现浏览器菜单的很多功能. 如保存文件,打开新文件,撤消、重做操作…等等 可以很容易的实现网页中的文本编辑器
4:搜索:window.location.href 后面跟新页面的链接地址 百度搜索https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=monline_4_dg&wd=" 加上需要搜索的信息即可
感谢老师