Web 技术研究所

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

低版本IE获取页面选中区域的坐标

  现代浏览器中获取页面选中区域的坐标有Range对象的getClientRanges方法可以用,但是在低版本IE中Range对象使用的是微软自己折腾出来的的TextRange,所以不可能用上那样的方法。不过低版本IE的Range对象上也有一些特有的属性可以用来实现这个效果。
  可以在页面上选中一端文字后然后到控制台运行这个代码试试
console.dir(document.selection.createRange());
  从这个结果中可以发现有一组bounding前缀的属性可以获取到这个TextRange所在的位置和尺寸。这样要实现这个效果甚至比现代浏览器还简单。下面是实现的例子

<script>
var handle=function(){
  var range=document.selection.createRange();
  if(range.htmlText=="")return; //没有选择内容则跳出
  edge.style.left=range.boundingLeft+"px";
  edge.style.top=range.boundingTop+"px";
  edge.style.width=range.boundingWidth+"px";
  edge.style.height=range.boundingHeight+"px";
  edge.style.display="block";
};
//绑定到操作事件上
document.attachEvent("onmouseup",handle),
document.attachEvent("onkeyup",handle);
</script>
<style>
#panel {position:relative;}
#edge {
  display:none;
  position:absolute;
  border:1px solid red;
}
</style>
<div id="edge"></div>
<div id="panel">
金樽清酒斗十千,玉盘珍羞直万钱。<br/>
停杯投箸不能食,拔剑四顾心茫然。<br/>
欲渡黄河冰塞川,将登太行雪满山。<br/>
闲来垂钓碧溪上,忽复乘舟梦日边。<br/>
行路难!行路难!多岐路,今安在?<br/>
长风破浪会有时,直挂云帆济沧海。<br/>
</div>
  参考:
    MSDN TextRange properties
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^