<
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
>
光标位置
-
www.
0097
.org
</
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.findText("你"); 下面有解释
rng.moveStart(" character " ,pn); rng.collapse( true ); //ture为光标指示到起点,false光标指示到终点 rng.select(); //同样可以用rng.move(
" character " ,pn)来实现无需上一步
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) //这里要注意-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:
<
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
>
经过多次调试才弄明白,当光标move时,它的开始和结束点是重合的,
所以如果move的话那它的头和尾的光标在一起,如果要选择区域的话就要两者都设,比如
rng.move("character",2);
rng.moveEnd("character",2);
rng.select()显示高亮,
如果我们没有将光标移动也就是
(var rng = box.createTextRange())状态, 那它的光标起始在头部,结束在尾部(可以负移动moveEnd),所以你moveStart就可以选择到文本最后的高亮,
而如果我们已经将光标有所移动比如:rng.findText("你");这样光标的起始和终点其实也是已经重合在了一起,
这个时候你moveStart不动的话那就必须要通过移动moveEnd来显示高亮,
<!--
欢迎转载,请保留作者和出处,谢谢
-->---------------
我注明是摘自LxcJie的专栏:)
<
HTML
>
<
STYLE
>
.notChangePartValue
...
{ input:expression(regInput( this )); }
</
STYLE
>
<
SCRIPT language
=
"
javascript
"
>
function
regInput(obj)
...
{ obj.ondrop = function () ... { return false ;} obj.oncontextmenu = function () ... { return false ;} obj.onkeydown = function () ... { restrictInputValue(obj) } }
function restrictInputValue(obj) ... { var range = obj.createTextRange(); if ( typeof (obj.initWidth) == " undefined " ) ... { obj.initWidth = range.boundingWidth; } var selRange = document.selection.createRange(); if (selRange.text.length == 0 ) ... { selRange.setEndPoint( " StartToStart " ,range); var currentWidth = selRange.boundingWidth; if (currentWidth < obj.initWidth) ... { if (event.keyCode < 33 || event.keyCode > 40 || event.keyCode == 46 || event.keyCode == 8 ) event.returnValue = false ; } if (currentWidth == obj.initWidth) ... { if (event.keyCode == 8 ) event.returnValue = false ; } } else ... { selRange.moveEnd( " character " , - selRange.text.length); // 据我测试利用selRange.collapse(true)即可 selRange.setEndPoint( " StartToStart " ,range); var currentWidth = selRange.boundingWidth; if (currentWidth <= obj.initWidth - 1 ) ... { if (event.keyCode < 33 || event.keyCode > 40 ) event.returnValue = false ; } } }</ SCRIPT > < BODY > < INPUT type = " text " value = " Soft " class = " notChangePartValue " > </ BODY > </ HTML >
今天仔细研究了一下
setEndPoint的用法:给它的定义是
t 根据其它范围的结束点设置某范围的结束点
< SCRIPT language = " javascript " > function aaa() ... { var rng = document.getElementById( " aa " ).createTextRange(); var rng1 = document.getElementById( " aa " ).createTextRange(); var selRange = document.selection.createRange(); selRange.setEndPoint( " StartToStart " ,rng); selRange.setEndPoint( " EndToEnd " ,rng); alert(selRange.text.length) selRange.select() } </ SCRIPT > < html > < BODY > < INPUT type = " text " value = " Softasdfasdfasfdaf " id = " aa " onclick = " aaa() " > < form name = " form1 " method = " post " action = "" > < input type = " button " name = " Button " value = " Button " onClick = " aaa() " > </ form > </ BODY > </ HTML >
上面是文本框的例子,
selRange.setEndPoint(" StartToStart " ,rng);的意思就是我们光标点开始往后的文本,
selRange.setEndPoint( " EndToEnd " ,rng);是光标点往前的文本,我们可以通过rng.move("character",4)来设置光标点,测试这个例子就明白了,
<
SCRIPT language
=
"
javascript
"
>
function
aaa()
...
{ var rng = document.getElementById( " aa " ).createTextRange(); var rng1 = document.getElementById( " aa " ).createTextRange(); var selRange = document.selection.createRange(); rng.move( " character " , 4 ) // rng1.setEndPoint("StartToStart",rng); selRange.setEndPoint( " EndToEnd " ,rng); alert(rng1.text) }
</
SCRIPT
>
<
html
>
<
BODY
>
<
INPUT type
=
"
text
"
value
=
"
Softasdfasdfasfdaf
"
id
=
"
aa
"
onclick
=
"
aaa()
"
>
<
form name
=
"
form1
"
method
=
"
post
"
action
=
""
>
<
input type
=
"
button
"
name
=
"
Button
"
value
=
"
Button
"
onClick
=
"
aaa()
"
>
</
form
>
</
BODY
>
</
HTML
>