原帖地址:http://www.mockte.com/rewrite.php/read-86.html
目前我开发的一个PHP系统中需要在div中截取文章被选文字的起始位置的功能。但是很遗憾,google、baidu了很多资料都非常不理想,于是自己深入研究了一下Selection对象,做了个针对IE的版本,相信能帮助需要这类功能的朋友,主要代码如下:
function getSel()
{
var element = document.getElementById('thediv');
if( document.selection ){
var range = document.selection.createRange();
var stored_range = range.duplicate();
stored_range.moveToElementText( element );
stored_range.setEndPoint( 'EndToEnd', range );
element.selectionStart = stored_range.text.length - range.text.length;
element.selectionEnd = element.selectionStart + range.text.length;
}
alert(element.selectionStart+";"+element.selectionEnd);
}
查看 DEMO 页面
说明:打开Demo页面后,用鼠标选中一段文字或单词,此时会弹出被选中文字在整篇文章中的起始位置。
Annotation Tool 项目Video演示 download (rar 439kb)
2009-04-04补充:
关于定位问题,我再补充一下,其实上面的方法不够好,我再提供一个更加简便易行的方法:
// 在得到selection and range的情况下:
var startRangeOffset = range.startOffset;
range.collapse(true);
range.setStart(range.startContainer, startRangeOffset-1);
range.setEnd(range.startContainer, startRangeOffset-1+plenght);
由于firefox的定位或者说是用js根据得到的start和end位置来设置选区,这个功能在
textarea中ff实现起来相当容易,但在div等同类容器中进行设置选区就显得有些困难,至少现在google等一些搜索引擎中也没能找到比较好的
解决方法,所以我研究了DOM
2的一些函数,得出以上方法可以设置选区,使用js在firefox中设置选取文字的起始位置和结束位置。有点啰嗦,sorry,我解释一
下,firefox的dom tree是很正规的,所以如果你使用前面的方法得到起始位置来代替
startRangeOffset
变量,会存在这样的问题,当你在一个容器中存在多个node对象的时候,这个时候你使用前面的方法得到起始位置来代替startRangeOffset
变
量就是出现一些问题,因为firefox每跳过一个node对象就开始重新计算起始位置。我不能够解释得很清楚,希望大家通过尝试来增强自己的理解,在我
的TcEditor项目中我使用了以上方法设定选区或者定位,所谓定位,就是setStart和setEnd设置相同的index即可。OK,Good
Luck!!
关于setStart和setEnd函数,大家参考,以上示例代码取自我的一个内部开源项目,不可直接使用,理解之后就知道该怎么使用,Thanks,好好学习一下:
https://developer.mozilla.org/en/DOM/range
分享到:
相关推荐
本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下: 由于刚接触Tree方面的东西。在网上看到了zTree,是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用...
javascript获取选中文本的测试脚本,选中文本时产生一个按钮,点击按钮显示文本内容
JS脚本获取系统信息,比较完整的,通过JS获取系统信息,快速简介!
脚本控制DIV三行三列布局自适应高度
javascript脚本获取当月第一天日期和最后一天日期,脚本测试正确无误。
实现js对div层的自由拖动,代码简单,适合于简单的div拖动,如果要实现更为强大的功能,可以在此基础上扩展。这里只为初学者提供个例子
jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本,基于JavaScript jdcookie.js下载 JD cookie一键获取脚本...
js动态引入外部js脚本并获取里面的变量值
利用iFIX脚本和控件,实现在iFIX画面上,通过按钮的点击,记录按钮动作的时间
将此文件上传到您的网站上,需要显示时间的地方加入: <script language="javascript" src="clock.js"> 显示的是用户本机的时间。如不需农历则去掉农历部份的函数。
kettle通过java脚本获取数据库的值..................................................................
HTML_DIV拼图_模块实例,应用了JS脚本,可以移动DIV模块
可是使用Autojs来运行,代码功能:实时获取时间和三轴加速度数据并输出到根目录的txt文档,代码中可以改变采样率和采集时间长度
基于DIV的JS滚动条控制文字滚动特效,拖动滚动条,文字区域可上下滚动,滚动条也是自定义的,不是默认风格的滚动条,本滚动条不但兼容IE浏览器,还可正常运行于火狐和Chrome等浏览器中。
弹出DIV层窗口(javascript脚本代码)
linux服务器,springboot,spring cloud、spring cloud alibaba等项目启动脚本 下载脚本, 1,上传脚本至jar包同级目录 2,更改脚本: jar包名称 项目文件路径 日志路径(包含日志名称) 脚本已配置好jvm优化...
重开AI软件,然后在AI菜单“文件”——“脚本”下可以看见你刚才放进去的脚本文件名。 提示: 1、运行脚本前,请先选中对象。 2、文本框中的距离设置可以带单位(如3 cm、10 px),也可以不带单位,不带单位则...
精通js脚本之jquery框架 jquery框架 精通js js 脚本 所有代码
linux shell脚本获取时间判断时间差,进行计算,自动化
AI CC 2015 JavaScript脚本手册,用于学习编写JSX脚本,官方文档