DHTML之-----document.selection 的 createRange
DHTML之-----document.selection 的 createRange
一、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);
- }
- }
下面是另一个列子
<style type="text/css">
html, body {
margin:0;
padding:100;
}
</style>
<textarea id="wc" style="width:700px; height:400px;">
好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字好多好多好多好多的字
</textarea>
<div id="floor" style="position:absolute;width:60px; height:20px; background-color:#000000;"></div>
<script type="text/javascript">
var IEShow = function (wc, floor) {
return function () {
if (document.selection) {
var range = document.selection.createRange();
floor.style.left = range.offsetLeft + 'px';
floor.style.top = range.offsetTop + 'px';
}
}
};
window.onload = function () {
var wc = document.getElementById('wc'), floor = document.getElementById('floor');
wc.onkeyup = wc.onmouseup = IEShow(wc, floor);
};
</script>