Blogger Information
Blog 24
fans 1
comment 0
visits 21765
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿百度文库中文搜索--2019年3月29日
王先生的博客
Original
648 people have browsed it

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

感谢老师

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post