javascript中createTextRange用法(focus)

最新推荐文章于 2022-03-09 16:05:40 发布

wing123123

最新推荐文章于 2022-03-09 16:05:40 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： JavaScript Go .net ViewUI

本文链接：https://blog.csdn.net/wing123123/article/details/83426746

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

createtextrange createrange区别:

对象或元素不同，虽然都是返回TextRange。例如：

var r=document.body.createTextRange()
var r=document.createRange()

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 type="button" οnclick="test1()" value="htmlText">

获取指定文本框中的选中的文字：只响应第一个文本框

<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.getElementById("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.getElementById("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>

wing123123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript中createTextRange用法(focus)

createtextrange createrange区别:对象或元素不同，虽然都是返回TextRange。例如： var r=document.body.createTextRange() var r=document.createRange() document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextRange...
复制链接

扫一扫