这个例子简单,主要使用了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=" 加上需要搜索的信息即可
感谢老师