createtextrange createrange区别:
对象或元素不同,虽然都是返回TextRange。例如:
document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextRange,Range -- 范围
返回createTextRange的text和htmlText
- <script
language="javascript"> - function
test() - {
- var
rng=document.body.createTextRange(); - alert(rng.text)
- }
- function
test1() - {
- var
rng=document.body.createTextRange(); - alert(rng.htmlText)
- }
- </script>
- <input
type="button" οnclick="test()" value="text">
<input
获取指定文本框中的选中的文字:只响应第一个文本框
- <input
id="inp1" type="text" value="1234567890"> - <input
id="inp2" type="text" value="9876543210"> - <input
type="button" οnclick="test()" value="确定"> - <script
language="javascript"> - function
test() - {
- var
o=document.getElementByIdx_x("inp1") - var
r = document.selection.createRange(); - if(o.createTextRange().inRange(r))
- alert(r.text);
- }
- </script>
页面文本倒序查找
- abababababababa
- <input
value="倒序查找a" οnclick=myfindtext("a") type="button"> - <script
language ='javascript'> - var
rng = document.body.createTextRange(); - function
myfindtext(text) - {
- rng.collapse(false);
- if(rng.findText(text,-1,1))
- {
- rng.select();
- rng.collapse(true);
- }else
- {alert("end");}
- }
- </script>
聚焦控件后把光标放到最后
- <script
language="javascript"> - function
setFocus() - {
- var
obj = event.srcElement; - var
txt =obj.createTextRange(); - txt.moveStart('character',obj.value.length);
- txt.collapse(true);
- txt.select();
- }
- </script>
- <input
type="text" value="http://toto369.net" οnfοcus="setFocus()">
得到文本框内光标位置
- <script
language="javascript"> - function
getPos(obj){ - obj.focus();
- var
s=document.selection.createRange(); - s.setEndPoint("StartToStart",obj.createTextRange())
- alert(s.text.length);
- }
- </script>
- <input
type="text" id="txt1" value="1234567890"> - <input
type="button" value="得到光标位置" οnclick=getPos(txt1)>
控制input框内光标位置
- <script
language="javascript"> - function
setPos(num) - {
- text1.focus();
- var
e =document.getElementByIdx_x("text1"); - var
r =e.createTextRange(); - r.moveStart('character',num);
- r.collapse(true);
- r.select();
- }
- </script>
- <input
type="text" id="text1" value="1234567890"> - <select
οnchange="setPos(this.selectedIndex)"> - <option
value="0">0</option> - <option
value="1">1</option> - <option
value="2">2</option> - <option
value="3">3</option> - <option
value="4">4</option> - <option
value="5">5</option> - <option
value="6">6</option> - <option
value="7">7</option> - </select>
选中文本框中的一段文字
- <script
language=javascript> - function
sel(obj,num) - {
- var
rng=obj.createTextRange() - var
sel = rng.duplicate(); - sel.moveStart("character",
num); - sel.setEndPoint("EndToStart",
rng); - sel.select();
- }
- </script>
- <input
type="text" id="text1" value="1234567890"> - <select
οnchange="sel(text1,this.value)"> - <option
value="0">0</option> - <option
value="1">1</option> - <option
value="2">2</option> - <option
value="3">3</option> - <option
value="4">4</option> - <option
value="5">5</option> - <option
value="6">6</option> - <option
value="7">7</option> - </select>
控制文本框内光标的移动
- <input
type="button" value="<" οnclick=go(-1)> - <input
id="demo" value="这里是文字"> - <input
type="button" value=">" οnclick=go(1)> - <script
language="javascript"> - function
go(n){ - demo.focus();
- with(document.selection.createRange())
- {
- moveStart("character",n);
- collapse();
- select();
- }
- }
- </script>
取光标位置
- <body>
- <div
id=box>点击textarea</div> - <mce:script
type="text/javascript"><!-- - 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) - }
- //
--></mce:script> - <textarea
οnclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf
- <script>
-
function storeCaret (textEl) { -
-
if (textEl.createTextRange) -
textEl.caretPos = document.selection.createRange().duplicate(); -
-
} -
-
function insertAtCaret (textEl, text) { -
-
if (textEl.createTextRange && textEl.caretPos) { -
var caretPos = textEl.caretPos; -
caretPos.text =caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?text + ' ' : text; -
} else -
textEl.value = text; -
} -
-
function deleteAtCaret (textEl) { -
-
if (textEl.createTextRange && textEl.caretPos) { -
var caretPos = textEl.caretPos; -
document.selection.clear(); -
} -
-
//alert(aForm.aTextArea. -
} -
- </script>
-
- <form
name=aForm> - <input
name=aTextArea size=120 wrap=soft οnselect="storeCaret(this);" οnclick="storeCaret(this);" οnkeyup="storeCaret(this);" value=这是例子,你可以在这里添加文字、插入文字。> - <br>
- <input
type=text name=aText size=80 value=我要在光标处插入这些文字><br> - <input
type=button value=我要在光标处插入上面文本框里输入的文字! οnclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);"> - <input
type=button value=删除选中文字 οnclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1> - </FORM>