createTextRange的text和htmltext的用法

collapse([bStart])
移动Range的插入点
bStart true(移到开头) false(移到末尾)

findText(sText [, iSearchScope] [, iFlags])
在Range中查找sText
iSearchScope 开始位置，负数方向搜索
iFlags 2(整词匹配) 4(区别大小写)

moveStart(sUnit [, iCount])
moveEnd(sUnit [, iCount])
移动Range的开头或结尾
sUnit character(字) word(词) sentence(句) textedit(Range)
iCount 移动数量，默认为1

moveToPoint(iX, iY)
移动光标到坐标(iX,iY)

pasteHTML(sHTMLText)
替换Range中的html

scrollIntoView([bAlignToTop])
滚动使之在当前窗口显示
bAlignToTop true(Range在窗口开头) false(Range在窗口底部)

select()
选中Range

设置光标(qiushuiwuhen)
<textarea id=demo cols=50 rows=5>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</textarea>
<br><input type=checkbox id=collapse>倒数 第<input id=s value=4 size=4>位 <input value="设置光标" type=button onclick=setCursor()>
<script>
function setCursor(){
var num=parseInt(document.all.s.value)
range=document.all.demo.createTextRange();
if(document.all.collapse.checked){
range.collapse(false);
range.moveEnd('character',-1*num);
}else{
range.collapse(true);
range.moveStart('character',-1+num);
}
range.select();
}
</script>

设置文本选择(qiushuiwuhen)
<div id=demo>关于光标定位的补充.abcdefghijklmnopqrstuvwxyz</div>
<br> 从正数<input id=b value=4 size=4> 到 倒数第<input id=s value=4 size=4>位 <input value="设置文本选择" type=button onclick=setSelect()>
<script>
function setSelect(){var range = document.body.createTextRange();
range.moveToElementText(demo)
range.moveEnd('character',-1*parseInt(document.all.s.value));
range.moveStart('character',-1+parseInt(document.all.b.value));
range.select();
}
</script>

取得当前坐标系列1(qiushuiwuhen)
<textarea id=show rows=10 cols=100>
先将光标置在这里任意处，然后点击按钮，看光标变化
</textarea>
<br><input type=button value=取得当前坐标 onclick='window.status=GetCursorPos()'>
<script>
function GetCursorPos(oTextArea)
{
s="~!@#$%^";
clipboardData.setData('text',s);
show.focus();
document.execCommand('paste');
var arr=show.value.split(s);
show.value=arr[1];
show.document.selection.empty();
show.document.selection.createRange().select();
show.focus();
clipboardData.setData('text',arr[0]);
document.execCommand('paste');
return arr[0].length;
}
</script>

取得当前坐标系列2(色眯眯的小疯狗)
<textarea rows=10 cols=100 onclick="getCursorPosition()">
北 京时间10月6日，世界三大通讯社之一的法新社刊发图文报道，中国国脚孙继海因为在最近的世界杯预选赛中的表现，已经吸引了意大利俱乐部AC米兰和都灵队 的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图 片。</textarea>
<script language=JScript>
function getCursorPosition(){
var src = event.srcElement
var oTR = src.createTextRange()
var textLength = src.innerText.length
var line, char, total, cl
oTR.moveToPoint(window.event.x, window.event.y)
oTR.moveStart("character", -1*textLength)
cl = oTR.getClientRects()
line = cl.length
total = oTR.text.length
oTR.moveToPoint(cl[cl.length-1].left-2, cl[cl.length-1].top-2)
oTR.moveStart("character", -1*textLength)
char = total - oTR.text.length
window.status = "行: " + line +", 列: " + char + ", 第 " + total + " 个字符"
}
</SCRIPT>

取得当前坐标系列3(Yang)
<textarea rows=20 cols=80 id=show>
Alpha 滤镜 : 线形 <img src=images/ad.gif style='filter: Alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=468,finishy=60)'><br>
Alpha 滤镜 :放射状<img src=images/ad.gif style='filter: Alpha(opacity=100,finishopacity=0,style=2,startx=0,starty=0,finishx=468,finishy=60)'><br>
Alpha 滤镜 :长方形<img src=images/ad.gif style='filter: Alpha(opacity=100,finishopacity=0,style=3,startx=0,starty=0,finishx=468,finishy=60)'><br>
<img src=images/ad.gif style='filter:blur(add=ture,direction=135,strength=100)'><br>
<img src=images/ad.gif style='filter:filph'><br>
<img src=images/ad.gif style='filter:filpv'><br>
<img src=images/ad.gif style='filter:chroma(color=white)'><br>
<p style='filter:Dropshadow(color=#ff0080,offx=5,offy=5.positive=0)'>样式表滤镜实例</p><br>
<img src=images/ad.gif style='filter:glow(color=blue,strength=10)'><br>
<img src=images/ad.gif style='filter:gray'><br>
<img src=images/ad.gif style='filter:invert'><br>
<img src=images/ad.gif style='filter:xray'><br>
<img src=images/ad.gif style='filter:light'><br>
<img src=images/ad.gif style='filter:mask(color=white)'><br>
<img src=images/ad.gif style='filter:shadow(color=red,direction=225)'><br>
<img src=images/ad.gif style='filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)'><br>
<img src=images/ad.gif style='filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)'><br>
<img src=images/ad.gif style='filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)'><br>
<img src=images/ad.gif style=''><br>
</textarea>
<input type=button value=运行代码 onclick=window.open().document.writeln(show.value)>
<input type=button value=取得当前坐标 onclick='window.status=GetCursorPos(show)'>
<script>
function GetCursorPos(oTextArea)
{
s="~!@#$%^";
clipboardData.setData('text',s);
oTextArea.focus();
document.execCommand('paste');
var ret=oTextArea.value.indexOf(s);
document.execCommand('undo');
return ret;
}
</script>

取得当前坐标系列4(qiushuiwuhen)
<textarea id=demo cols=50>
中文abcdefghijklmnopqrstuvwxyz
</textarea>
<br><input type=button onclick=get(demo) value=get>
<script>
function get(oTextarea){
var qswh="@#%#^&#*$"
oTextarea.focus();
rng=document.selection.createRange();
rng.text=qswh;
var tmp=oTextarea.value.indexOf(qswh)
rng.moveStart("character", -qswh.length)
rng.text="";
alert(tmp);
}
</script>

取得当前坐标系列5(色眯眯的小疯狗)
<textarea rows=10 cols=100 onclick="getCursorPosition()" onkeyup="getCursorPosition()">
北 京时间10月6日，世界三大通讯社之一的法新社刊发图文报道，中国国脚孙继海因为在最近的世界杯预选赛中的表现，已经吸引了意大利俱乐部AC米兰和都灵队 的争购。中国队只需在10月7日同阿曼队的比赛中战平就将首次进入世界杯决赛圈。图为孙继海(右)1998年12月19日在亚洲杯上的资料图 片。</textarea>
<script language=JScript>
function getCursorPosition(){
var src = event.srcElement
var oTR = src.createTextRange()
var oSel = document.selection.createRange()
var textLength = src.innerText.length
var line, char, total, cl
oTR.moveToPoint(oSel.offsetLeft, oSel.offsetTop)
oTR.moveStart("character", -1*textLength)
cl = oTR.getClientRects()
line = cl.length
total = oTR.text.length
oTR.moveToPoint(cl[cl.length-1].left, cl[cl.length-1].top)
oTR.moveStart("character", -1*textLength)
char = total - oTR.text.length
if (oSel.offsetTop != cl[cl.length-1].top) {line++; char = 0}
else if (src.createTextRange().text.substr(oTR.text.length, 2) == "\r\n") char -= 2
window.status = "行: " + line +", 列: " + char + ", 第 " + total + " 个字符"
}
</SCRIPT>
取得当前坐标系列6(qiushuiwuhen)
<textarea id=demo cols=50>
中文abcdefghijklmnopqrstuvwxyz</textarea>
<br><input type=button value=getPos onclick=getPos(demo)>
<script>
function getPos(obj){
obj.focus();ml=obj.value.length;l=0;
rng=document.selection.createRange();
rng.moveEnd("character",ml);
try{l=ml-rng.htmlText.match(/>((.|\n)+)<\/textarea>/i)[1].length}catch(e){}
alert(l)
}
</script>

获取光标位置系列7(flashsoft)
<body><div id=box>点击textarea</div>
<script>
function doit(){
var rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x,event.y);
rng.moveEnd("character",event.srcElement.value.length)
box.innerText = "光标位置：" + (event.srcElement.value.length - rng.text.length)
}
</script><textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf</textarea></body>

获取光标位置系列8(flashsoft)

 < html >

 < head >
 < meta  http-equiv = "Content-Type"  content = "text/html;charset=gb2312" >
 < meta  name = "GENERATOR"  content = "MicrosoftFrontPage4.0" >
 < meta  name = "ProgId"  content = "FrontPage.Editor.Document" >
 < title > 光标位置 </ title >
 < style >
 INPUT{border:1solid#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实现光标定位

 < p >
 < textarea  rows = "7"  cols = "49"  id = "box"  onclick = tellPoint () > 我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
 为了你我愿意
 动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
 如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
 也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
 我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
 </ textarea >

 < script >

 functionmovePoint()
 {
 var pn = parseInt (pnum.value);

 if(isNaN(pn))
 return;

 var rng = box .createTextRange();

 rng.moveStart("character",pn);

 rng.collapse(true);

 rng.select();

 returnCase(rng)

 }

 functiontellPoint()
 {
 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)
 }


 functionreturnCase(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;
 }


 functionselectText(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();

 functionfindText(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 >
 </ p >
 < p > </ p >
 光标位置： < input  type = "text"  value = "0"  id = "pnum"  size = "8" >  < input  type = "button"  onclick = "movePoint()"  value = "移动光标到指定位置" >
 < p > </ p >
 选择指定范围： < input  type = "text"  size = "9"  id = "sbox" > -- < input  type = "text"  size = "9"  id = "ebox" >  < input  type = "button"  onclick = "selectText(sbox.value,ebox.value)"  value = "选择" >
 < p > </ p >
 选择查找字符： < input  type = "text"  value = ""  id = "cbox"  size = "8" >  < input  type = "button"  onclick = "findText(cbox.value)"  value = "查找下一个并选择" >

  </ td >
  < td  width = "217" > boundingHeight:&nbsp; < span  id = "bh" > </ span > </ td >
  </ tr >
  < tr >
  < td  width = "217" > boundingWidth:&nbsp; < span  id = "bw" > </ span > </ td >
  </ tr >
  < tr >
  < td  width = "217" > boundingTop:&nbsp; < span  id = "bt" > </ span > </ td >
  </ tr >
  < tr >
  < td  width = "217" > boundingLeft:&nbsp; < span  id = "bl" > </ span > </ td >
  </ tr >
  < tr >
  < td  width = "217" > offsetLeft:&nbsp; < span  id = "ol" > </ span >  </ td >
  </ tr >
  < tr >
  < td  width = "217" > offsetTop:&nbsp; < span  id = "ot" > </ span >  </ td >
  </ tr >
  < tr >
  < td  width = "217" > text:&nbsp; < span  style = "position:absolute;z-index:10"  id = "t" > </ span >  </ td >
  </ tr >
 </ table >
 </ body >

 </ html >

 < html >

 < head >
 < meta  http-equiv = "Content-Type"  content = "text/html;charset=gb2312" >
 < meta  name = "GENERATOR"  content = "MicrosoftFrontPage4.0" >
 < meta  name = "ProgId"  content = "FrontPage.Editor.Document" >
 < title > 光标位置 </ title >
 < style >
 INPUT{border:1solid#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实现光标定位

 < p >
 < textarea  rows = "7"  cols = "49"  id = "box"  onclick = tellPoint () > 我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸
 为了你我愿意
 动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离
 如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹
 也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里
 我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离
 </ textarea >

 < script >

 functionmovePoint()
 {
 varpn = parseInt (pnum.value);

 if(isNaN(pn))
 return;

 varrng = box .createTextRange();

 rng.moveStart("character",pn);

 rng.collapse(true);

 rng.select();

 returnCase(rng)

 }

 functiontellPoint()
 {
 varrng = event .srcElement.createTextRange();

 rng.moveToPoint(event.x,event.y);
 rng.moveStart("character",-event.srcElement.value.length)

 pnum.value = rng .text.length

 returnCase(rng)
 }


 functionreturnCase(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;
 }


 functionselectText(sp,ep)
 {
 sp = parseInt (sp)
 ep = parseInt (ep)

 if(isNaN(sp)||isNaN(ep))
 return;

 varrng = 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);
 }

 varrg = box .createTextRange();

 functionfindText(tw)
 {
 if(tw =="")
 return;

 varsw = 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 >
 </ p >
 < p > </ p >
 光标位置：< input  type = "text"  value = "0"  id = "pnum"  size = "8" >  < input  type = "button"  onclick = "movePoint()"  value = "移动光标到指定位置" >
 < p > </ p >
 选择指定范围：< input  type = "text"  size = "9"  id = "sbox" > -- < input  type = "text"  size = "9"  id = "ebox" >  < input  type = "button"  onclick = "selectText(sbox.value,ebox.value)"  value = "选择" >
 < p > </ p >
 选择查找字符：< input  type = "text"  value = ""  id = "cbox"  size = "8" >  < input  type = "button"  onclick = "findText(cbox.value)"  value = "查找下一个并选择" >

 </ td >
 < td  width = "217" > boundingHeight:&nbsp; < span  id = "bh" > </ span > </ td >
 </ tr >
 < tr >
 < td  width = "217" > boundingWidth:&nbsp; < span  id = "bw" > </ span > </ td >
 </ tr >
 < tr >
 < td  width = "217" > boundingTop:&nbsp; < span  id = "bt" > </ span > </ td >
 </ tr >
 < tr >
 < td  width = "217" > boundingLeft:&nbsp; < span  id = "bl" > </ span > </ td >
 </ tr >
 < tr >
 < td  width = "217" > offsetLeft:&nbsp; < span  id = "ol" > </ span >  </ td >
 </ tr >
 < tr >
 < td  width = "217" > offsetTop:&nbsp; < span  id = "ot" > </ span >  </ td >
 </ tr >
 < tr >
 < td  width = "217" > text:&nbsp; < span  style = "position:absolute;z-index:10"  id = "t" > </ span >  </ td >
 </ tr >
 </ table >
 </ 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 实现光标定位 <p> <textarea rows="7" cols="49" id="box" onclick=tellPoint()>我怕来不及我要抱着你，直到感觉你的绉纹有了岁月的痕迹，直到视线变得模糊直到不能呼吸 为了你我愿意 动也不能动也要看着你，直到感觉你的发线有了白雪的痕迹，直到肯定你是真的直到失去力气让我们形影不离 如果全世界我也可以放弃，至少还有你值得我去珍惜而你在这里就是生命的奇迹 也许全世界我也可以忘记，就是不愿意失去你的消息你掌心的痣我总记得在哪里 我们好不容易我们身不由已，我怕时间太快不够将你看仔细，我怕时间太慢日夜担心失去你恨不得一夜之间白头永不分离 </textarea> <script> 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> </p> <p></p> 光标位置：<input type="text" value="0" id="pnum" size="8"> <input type="button" onclick="movePoint()" value="移动光标到指定位置"> <p></p> 选择指定范围：<input type="text" size="9" id="sbox"> -- <input type="text" size="9" id="ebox"> <input type="button" onclick="selectText(sbox.value,ebox.value)" value="选择"> <p></p> 选择查找字符 ：<input type="text" value="" id="cbox" size="8"> <input type="button" onclick="findText(cbox.value)" value="查找下一个并选择"> </td> <td width="217">boundingHeight:&nbsp;<span id="bh"></span></td> </tr> <tr> <td width="217">boundingWidth:&nbsp;<span id="bw"></span></td> </tr> <tr> <td width="217">boundingTop:&nbsp;<span id="bt"></span></td> </tr> <tr> <td width="217">boundingLeft:&nbsp;<span id="bl"></span></td> </tr> <tr> <td width="217">offsetLeft:&nbsp;<span id="ol"></span> </td> </tr> <tr> <td width="217">offsetTop:&nbsp;<span id="ot"></span> </td> </tr> <tr> <td width="217">text:&nbsp;<span style="position: absolute; z-index: 10" id="t"></span> </td> </tr> </table> </body> </html>
今天又看到一种

 < textarea  id = demo  cols = 50 >
 中文abcdefghijklmnopqrstuvwxyz </ textarea >
 < br > < input  type = button  value = getPos  onclick = getPos (demo) >
 < script t

分享到：

通过JavaScript脚本复制网页上的一个表格 | （转）使用TextRange对象

• 2009-09-30 15:27
• 浏览 1502
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论