Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

现代浏览器获取页面选中区域的坐标

  最近这个问题问的比较多,现代浏览器有提供相关的接口,要实现这个效果并不难。用的是getClientRects方法在Range对象上的扩展,但是这只是W3C的一个草案,不过现代浏览器已经基本实现了。在低版本IE中由于Range对象比较特殊,所以需要另做兼容。
  首先我们要获取Range对象,这个可以从Selection对象中找到。具体操作可以参见之前的文章“selection对象和range对象”。除此之外还有getClientRects方法需要了解,这也可以从之前的文章“获取元素在可见区域中的矩形区域”中找到。有了这些知识,剩下的就是对于选区变化的监控。虽然有很多事件可以用,但是火狐在这方面并没有兼容,所以没办法只能从基本的鼠标和键盘的操作事件中监听。下面是效果截图和实例的完整代码

<script>
//判断Range对getClientRects的支持
if(Range.prototype.getClientRects){
  var handle=function(){
    var selection,range;
    selection=document.getSelection(); //获取selection对象
    if(selection.rangeCount==0)return; //如果没有选区则跳出
    range=selection.getRangeAt(0); //获取selection对象
    if(range.collapsed)return; //如果没选中东西则跳出
    //计算最大区域并做相关操作
    (function(rects){
      var i=0,o,box={};
      while(o=rects[i++])
        o.left>box.left||(box.left=o.left),
        o.right<box.right||(box.right=o.right),
        o.top>box.top||(box.top=o.top),
        o.bottom<box.bottom||(box.bottom=o.bottom);
      //把edge移到box的位置并显示出来
      edge.style.left=box.left+"px";
      edge.style.top=box.top+"px";
      edge.style.width=box.right-box.left+"px";
      edge.style.height=box.bottom-box.top+"px";
      edge.style.display="block";
    })(range.getClientRects());
  };
  //绑定到操作事件上
  document.addEventListener("mouseup",handle),
  document.addEventListener("keyup",handle);
};
</script>
<style>
#panel {position:relative;}
#edge {
  display:none;
  position:absolute;
  outline:3px solid red;
  background:rgba(255,0,0,0.1);
}
</style>
<div id="edge"></div>
<div id="panel">
金樽清酒斗十千,玉盘珍羞直万钱。<br/>
停杯投箸不能食,拔剑四顾心茫然。<br/>
欲渡黄河冰塞川,将登太行雪满山。<br/>
闲来垂钓碧溪上,忽复乘舟梦日边。<br/>
行路难!行路难!多岐路,今安在?<br/>
长风破浪会有时,直挂云帆济沧海。<br/>
</div>
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^