`
wing123
  • 浏览: 788839 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript中createTextRange用法(focus)

JavaScriptGo.net 
阅读更多



 


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" onclick="test()" value="text">   
<input type="button" onclick="test1()" value="htmlText">

 

 

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

 

<input id="inp1" type="text" value="1234567890">   
<input id="inp2" type="text" value="9876543210">   
<input type="button" onclick="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" onclick=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" onfocus="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="得到光标位置" onclick=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 onchange="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 onchange="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="<" onclick=go(-1)>    
<input id="demo" value="这里是文字">   
<input type="button" value=">" onclick=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 onclick=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 onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" value=这是例子，你可以在这里添加文字、插入文字。> 
<br> 
<input type=text name=aText size=80 value=我要在光标处插入这些文字><br>
<input type=button value=我要在光标处插入上面文本框里输入的文字！ onclick="insertAtCaret(this.form.aTextArea, this.form.aText.value);">
<input type=button value=删除选中文字 onclick=deleteAtCaret(this.form.aTextArea); id=button1 name=button1>
</FORM>

 

 

 

  • 大小: 3.9 KB
分享到：
| location的各个属性
评论
2 楼 yizishou 2016-09-18  
IE9- Only
1 楼 zuoming99 2011-04-08  
IEOnly
发表评论

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

相关推荐

    js createRange与createTextRange的一些用法实例

    关于createTextRange和createRange的一些用法,脚本之家增强版。

    createTextRange()的使用示例含文本框选中部分文字内容

    代码如下: [removed] function test() { var rng=document.body.createTextRange(); alert&#40;rng.text&#41; } function test1() { var rng=document.body.createTextRange(); alert&#40;rng.htmlText&#41; } ...

    javascript在一段文字中的光标处插入其他文字

    例如：一个文本框里有一段文字...[removed] function setCaret(textObj){ if(textObj.createTextRange){ textObj.caretPos=document.selection.createRange().duplicate(); } } function insertAtCaret(textObj,

    javascript实现复制与粘贴操作实例

    本文实例讲述了javascript实现复制与粘贴操作的方法。分享给大家供大家参考。 具体实现方法如下： 代码如下:[removed] function readTxt() { alert&#40;window.clipboardData.getData(“text”&#41;); } ...

    通过JavaScript脚本复制网页上的一个表格

    在Msdn中发现只有Body、TextArea等对象支持createTextRange()方法，继续在msdn中仔细查阅了一下，createTextRange()返回的是一个 TextRange 对象，继续查阅 TextRange 对象，发现其有很多方法，先试了试findText...

    javsropt代码

    &lt;input style="ime-mode:disabled"&gt; 关闭输入法 &lt;br/&gt;光标是停在文本框文字的最后 &lt;script language="javascript"&gt; function cc() { var e = event.srcElement; var r =e....

    javascript 设置文本框中焦点的位置

    代码如下:var obj=document.getElementById(“txtUserID”) var range=obj.createTextRange() //选中文本的起始位置（从第3个字符之后开始） range.moveStart(“character”,3) //选中文本的结束位置（到全部字符的...

    textbook输入内容后回车，光标定位在内容后面

    function imei_Keypress() { if (window.event.... var rtextRange = esrc.createTextRange(); rtextRange.moveStart('character', esrc.value.length); rtextRange.collapse(true); rtextRange.select(); }

    javascript复制粘贴与clipboardData的使用

    window.clipboardData可以实现复制与粘贴的操作，它的getData 方法可以实现数据的读取，setData方法可以实现数据的设置 [removed] function readTxt() { alert&#40;window.clipboardData.getData("text"&#41;); } ...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    javascript textarea光标定位方法(兼容IE和FF)

    今天在做一个博客转发的功能，就像新浪微薄转播的那个功能一样，有一个textArea,就是我们发微薄的那个框，别人的微薄都有一个转发的按钮，当我们点击这个转发按钮的时候，他的微薄就会进入到textArea中，看起来很...

    跨浏览器开发经验总结（四） 怎么写入剪贴板

    IE、 Firefox可以支持JavaScript往剪贴板写入内容 IE可以很方便的支持剪贴板内容写入命令，可以... 使用window.clipboardData的方法如下，代码中同时实现了Firefox下写入剪贴板的功能： 代码如下: if(window.clipboardD

    firefox下javascript实现高亮关键词的方法

     FireFox下有： var range = document.body.createTextRange(); IE下有findText及pasteHTML，但是fireFox下就没有！怎么办？查了好多资料，都没有能说出个所以然的，皇天不负有心人，终于让我给搞出来了！ 注...

    javascript高亮效果的二种实现方法

    js高亮方法一： 代码如下:[removed] function HighLight(nWord){ if(nWord!=”){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML(“” + keyword.text + “”)...

    IE6,IE7,IE8下使用Javascript记录光标选中范围（已补全）

    主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择开始元素和偏移量，以及结束元素以及偏移量，那么我们可以用下面的例子把用户选择的内容用js给标记起来 代码如下: &lt;head&gt; [removed...

    光标的一些操作总结

    光标不变 直接obj.focus()，光标会返回之前的位置，即位置不变 2.光标在最前 代码如下:var r = obj.createTextRange(); r.collapse(); r.select(); 用这个方法可以使光标在input框最前面 3.光标在最后 代码如下:...

    JS中innerHTML和pasteHTML的区别实例分析

    pasteHTML()是一个方法，在指定的文字区域内替换该区域内的文本或者HTML，该方法必须应用于一个 createTextRange() 或者 document.selection.createRange() 创建的区域上 例： [removed] function addLink(){ var ...

    js移动焦点到最后位置的简单方法

    当输入框(input/textarea)获得焦点时，将焦点移动到最后，在某些情况下用户体验很好。网上的大部分方法都是针对IE浏览器的。...其实可以将moveStart这行删除，因为createTextRange方法创建range后，利用collaps

Magicbox
Global site tag (gtag.js) - Google Analytics