- 浏览: 247664 次
- 性别:
- 来自: 沈阳
-
文章分类
最新评论
-
Araxis:
也遇到了楼主的问题,我用的sockjs.0.3.4,升级版本到 ...
Websocket出现的错误 -
love_jun1314:
怎么进行转换成功并没有看到a.flv文件呢? 你把commen ...
java调用ffmpeg执行视频转换 -
枫林top:
不错,挺好的
看老外程序员如何向妻子解释设计模式 -
likj_sh:
太感谢了 ,困惑了好久
Struts2 + Spring + Hibernate + DWR 项目布署笔记 -
dhl004:
...
web.xml 通过contextConfigLocation配置spring 的方式
一、document.selection 介绍
document.selection 表示当前网页中的选中内容。
方法有:
- clear 清除选中的内容
- empty 取消选中
- createRange 返回 TextRange 或 ControlRange 对象
- createRangeCollection 不支持
属性有:
- type 选中内容的类型
- typeDetail 不支持
二、document.selection.createRange()详细介绍
document.selection.createRange() 根据当前文字选择返回 TextRange 对象,或根据控件选择返回ControlRange 对象。
配合 execCommand,在 HTML 编辑器中很有用,比如:文字加粗、斜体、复制、粘贴、创建超链接等。
例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>document.selection 的 createRange</title> </head> <body> <div>请选中这里的部分文字。</div> <div><input type="button" value="加粗" onclick="javascript:Bold();" /></div> <script type="text/javascript" language="javascript"> <!-- function Bold() { var r = document.selection.createRange(); r.execCommand("Bold"); } --> </script> </body> </html>
三、光标定位的例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>光标位置</title> <style> INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} </style> </head> <body> <table border="0" width="700" cellspacing="0" cellpadding="0"> <tr> <td width="479" rowspan="7"> 点击 TextArea 实现光标定位 <textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸 为了你我愿意 动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到失去力气让我们形影不离 如果全世界我也可以放弃,至少还有你值得我去珍惜而你在这里就是生命的奇迹 也许全世界我也可以忘记,就是不愿意失去你的消息你掌心的痣我总记得在哪里 我们好不容易我们身不由已,我怕时间太快不够将你看仔细,我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离 </textarea> <script language="javascript"> function movePoint() { var pn = parseInt(pnum.value); if(isNaN(pn)) return; var rng = box.createTextRange(); rng.moveStart("character",pn); rng.collapse(true); rng.select(); returnCase(rng) } function tellPoint() { var rng = event.srcElement.createTextRange(); rng.moveToPoint(event.x,event.y); rng.moveStart("character",-event.srcElement.value.length) pnum.value = rng.text.length returnCase(rng) } function returnCase(rng) { bh.innerText = rng.boundingHeight; bl.innerText = rng.boundingLeft; bt.innerText = rng.boundingTop; bw.innerText = rng.boundingWidth; ot.innerText = rng.offsetTop; ol.innerText = rng.offsetLeft; t.innerText = rng.text; } function selectText(sp,ep) { sp = parseInt(sp) ep = parseInt(ep) if(isNaN(sp)||isNaN(ep)) return; var rng = box.createTextRange(); rng.moveEnd("character",-box.value.length) rng.moveStart("character",-box.value.length) rng.collapse(true); rng.moveEnd("character",ep) rng.moveStart("character",sp) rng.select(); returnCase(rng); } var rg = box.createTextRange(); function findText(tw) { if(tw=="") return; var sw = 0; if(document.selection) { sw = document.selection.createRange().text.length; } rg.moveEnd("character",box.value.length); rg.moveStart("character",sw); if(rg.findText(tw)) { rg.select(); returnCase(rg); } if(rg.text!=tw) { alert("已经搜索完了") rg = box.createTextRange() } } </script> 光标位置:<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置"> 选择指定范围:<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择"> 选择查找字符 :<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择"> </td> <td width="217">boundingHeight: <span id="bh"></span></td> </tr> <tr> <td width="217">boundingWidth: <span id="bw"></span></td> </tr> <tr> <td width="217">boundingTop: <span id="bt"></span></td> </tr> <tr> <td width="217">boundingLeft: <span id="bl"></span></td> </tr> <tr> <td width="217">offsetLeft: <span id="ol"></span> </td> </tr> <tr> <td width="217">offsetTop: <span id="ot"></span> </td> </tr> <tr> <td width="217">text: <span style="position: absolute; z-index: 10" id="t"></span> </td> </tr> </table> </body> </html>
四、项目中用到的光标定位
//obj:要设置的对象 num:把光标设在那个位置 function setFocus(obj,num) { var rng=obj.createTextRange(); rng.moveStart("character", num); rng.collapse(true); rng.select(); } //改变当前页面的焦点 function updateCurrentPageFocus(){ //如果是合订书名 var obj; <c:if test="${indexingBean.isBound==0}"> obj=document.indexform.firstBookName; </c:if> <c:if test="${indexingBean.isBound==1}"> obj=document.indexform.boundBookName; </c:if> if(StringUtils.isBlank(obj.value)){ setFocus(obj,0); }else{ setFocus(obj,obj.value.length); } }
<html xmlns="http://www.w3.org/1999/xhtml"> <head><TITLE>xxx</TITLE> <script language=JavaScript> //选中行去除一个缩进============== function selDelTab() { var str=new Array(); var slct=document.selection.createRange(); var rng=slct;//【为了保持选区】 var r1=rng.duplicate();//【为了保持选区】克隆 r1.expand("textedit"); //【为了保持选区】r1扩展到全部编辑区域 var r2=r1.duplicate();//【为了保持选区】r2也涵盖全部编辑区域 alert("r2==="+r2.text); r1.setEndPoint("EndToStart",rng);//【为了保持选区】r1的开始端不动,r1的结尾放到rng的开始 alert("r1=="+r1.text); r2.setEndPoint("StartToEnd",rng);//【为了保持选区】r1的结尾端不动,r2的开始放到rng的结尾 var str=slct.text.split("\n"); var tmp=''; for(i=0;i<str.length;i++) { tmp=tmp + str[i].replace(/^\t(.*)/,'$1') + '\n'; } slct.text=tmp.replace(/[\n\n]$/gm,'');//replace去除空白行 r1.setEndPoint("StartToStart",r2);//【为了保持选区】r1的结尾端不动,r1的开始放到r2的开始 r1.select();//【为了保持选区】 } </script> </head> <body > <div id=edt> <input id=p1 type=button value=←选中行缩进处理 style="font-size:12px;display:inline" onclick="selDelTab();"> <textarea id=txt rows=22 cols=120 > 上卷 1 绪论 1 世界经济史的研究对象和基本内容 2 世界经济史的分期 6 研究世界经济史的意义 13 第一篇 资本主义生产方式确立世界经济体系形成(16世纪~19世纪60年代) 21 第一章 西欧封建社会末期资本主义关系的产生和地理大发现 21 第一节 西欧封建社会末期经济的发展和资本主义关系的出现 21 </textarea> </div> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <div nowrap CONTENTEDITABLE onmouseup="getCursorPos();">123456789</div> <script> function getCursorPos(){ var pos=-1; var sText=document.selection.createRange(); alert(sText.text); var tempText=document.body.createTextRange();; sText.select(); tempText.setEndPoint("EndToStart",sText); pos=tempText.text.length; alert(pos); } </script> </BODY> </HTML>
理解setEndPoint方法
今天在修改控件时,使用到了setEndPoint方法,查找了MSDN,自己测试了一下,总结了该方法的使用,供大家分享。
MSDN上的解释是:
Sets the endpoint of one range based on the endpoint of another range.
表面意思是:在另一个range的endpoint基础上设置某个range的endpoint.
基本概念:
A text range has two endpoints: one at the beginning of the text range and one at the end. An endpoint can also be the position between two characters in an HTML document.
一个text range包含两个endpoints,一个在text range的开头,另一个在text range的末尾。一个endpoint也可以在HTML文档的两个字符之间。
Syntax:
TextRange.setEndPoint(sType, oTextRange)
Parameters
sType |
Required. String that specifies the endpoint to transfer using one of the following values.
|
||||||||
oTextRange |
Required. TextRange object from which the source endpoint is to be taken. |
Return Value
No return value.
举例:
//123被选中
var workRange=document.selection.createRange();
var allRange=obj.createTextRange();//obj指代文本框实例
情况一:
workRange.setEndPoint("StartToStart",allRange);
workRange.text => 0123
情况二:
workRange.setEndPoint("EndToStart",allRange);
workRange.text => 0
情况三:
workRange.setEndPoint("StartToEnd",allRange);
workRange.text => 456789
情况四:
workRange.setEndPoint("EndToEnd",allRange);
workRange.text => 123456789
解释:
情况一:
workRange.text初始值为123,两个endpoints分别位于0和1之间、3和4之间。我们简称0和1之间的endpoint为epStart,3和4之间的endpoint为epEnd,理解执行结果的核心是理解workRange.setEndPoint方法的第一个参数。同时,我们需要理解的一点就是allRange也存在两个endpoints,分别位于0之前、9之后。我们简称这两个endpoints分别为allRange_epStart和allRange_epEnd。
“StartToStart”英文解释是:Move the start of the TextRange object to the end of the specified oTextRange parameter.
在本例中,也就是指:将workRange的epStart移动到allRange的allRange_epStart,那么workRange的文本变为allRange_epStart到epEnd范围之间。AllRange_epStart成为了workRange的epStart。情况二、三、四的解释类似,就不啰唆了。
发表评论
-
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2016-11-23 12:11 686HTML5 Canvas中提供了 ... -
移动端H5页面高清多屏适配方案
2016-11-17 08:35 865背景 开发移动端H5页面 面对不同分辨率的 ... -
使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备
2016-11-03 23:52 1002曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时 ... -
CSS3的calc()使用
2016-11-03 21:51 938calc()对大家来说,或许很陌生,不太会相信calc()是 ... -
CSS3的REM设置字体大小
2016-11-03 21:50 953在Web中使用什么单位来定义页面的字体大小,至今天为止都还在 ... -
gulp使用小结
2016-05-22 19:02 666这篇文章不会介绍 gulp 的起源、发展;不会去一个个讲解 ... -
用gulp做一个略完整的前端打包工作
2016-05-22 18:59 2450我们的官网要改版,会从以前的单一产品变成 ... -
前端神器avalonJS入门
2016-05-19 19:32 614本章将介绍如何使用avalon来实现前端路由功能。 我们需 ... -
给Webstorm的HTML自动压缩插件
2016-05-07 14:20 1288前端代码的压缩 前端的js、css、html的压缩不仅会让 ... -
gulp教程之gulp中文API
2016-05-07 13:44 579http://www.ydcss.com/ ... -
HTML5 Boilerplate - 让页面有个好的开始
2016-04-20 19:08 684一:HTML5 Boilerplate是什 ... -
来,让我们谈一谈 Normalize.css
2016-04-20 19:07 467本文译自Normalize.css官网: http:// ... -
移动平台的meta标签-----神奇的功效
2016-02-18 10:51 478对于桌面平台web布局中大家对meta标签再熟悉不过了,它永 ... -
如何一步步把网站Retina优化
2015-12-21 11:21 669随着高清屏幕、高分辨率屏幕越来越流行,例如MacBook R ... -
Modernizr.js入门指南
2015-05-26 17:52 696Modernizr.js入门指南 ... -
JetBrain WebStorm 注册码
2015-01-20 12:11 745webStorm : UserName:William === ... -
HTML5 CSS3 专题 :诱人的实例 3D展示商品信息
2015-01-18 00:14 828http://blog.csdn.net/lmj62356 ... -
CSS实现背景透明,文字不透明(各浏览器兼容)
2014-10-29 17:01 531/*CSS*/ .waps{ background:url ... -
inline-block 前世今生
2014-04-12 12:12 523原文地址:http://ued.taobao.com/blo ... -
CSS旋转与翻转
2014-03-10 02:41 916css 2.0还是没有翻转 ...
相关推荐
var range = window.frames["x"].document.selection.createRange(); window.frames["x"].document.execCommand(hc, false, pa); } ``` 4. **构建用户界面**:创建包含编辑按钮的表单,这些按钮将在点击时调用...
获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 <body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);...
通过`document.selection.createRange()`获取当前选中文本,然后使用`execCommand`方法执行相应的格式化命令,如加粗、斜体、下划线等。 ```javascript function format(hc, pa) { window.frames["x"].focus(); ...
4. **处理选中内容**:通过`document.selection.createRange()`方法来获取用户当前选中的文本范围。 5. **实现编辑功能**:使用`insertHTML`方法将特定的HTML代码插入到选中的位置,以实现如加粗、斜体等功能。 ###...
通过`Document.selection.createRange().htmlText`获取选定文本的HTML代码。 #### 十五、Navigate的参数调用 使用`Navigate`方法时,可以通过传入特定参数来控制导航行为。 #### 十六、本地文件收藏夹操作 可以...