`
kalogen
  • 浏览: 864654 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

关于createTextRange和createRange的一些用法

JavaScriptGo.netBlog 
阅读更多

一、返回createTextRange的text和htmlText  
 
<mce:script language="javascript"><!--  
function test()  
{  
var rng=document.body.createTextRange();  
alert(rng.text)  
}  
function test1()  
{  
var rng=document.body.createTextRange();  
alert(rng.htmlText)  
}  
// --></mce: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="确定"> 
<mce:script language="javascript"><!--  
function test()  
{  
var o=document.getElementById("inp1")  
var r = document.selection.createRange();  
if(o.createTextRange().inRange(r))  
alert(r.text);  
}  
// --></mce:script> 
 
 
三、页面文本倒序查找  
 
abababababababa  
<input value="倒序查找a" onclick=myfindtext("a") type="button"> 
<mce: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");}  
}  
// --></mce:script> 
 
 
四、聚焦控件后把光标放到最后  
 
<mce:script language="javascript"><!--  
function setFocus()  
{  
var obj = event.srcElement;  
var txt =obj.createTextRange();  
txt.moveStart('character',obj.value.length);  
txt.collapse(true);  
txt.select();  
}  
// --></mce:script> 
<input type="text" value="http://toto369.net" onfocus="setFocus()"> 
 
 
五、得到文本框内光标位置  
 
<mce:script language="javascript"><!--  
function getPos(obj){  
obj.focus();  
var s=document.selection.createRange();  
s.setEndPoint("StartToStart",obj.createTextRange())  
alert(s.text.length);  
}  
// --></mce:script> 
<input type="text" id="txt1" value="1234567890"> 
<input type="button" value="得到光标位置" onclick=getPos(txt1)> 
 
 
六、控制input框内光标位置  
 
<mce: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();  
}  
// --></mce: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> 
 
 
七、选中文本框中的一段文字  
 
<mce: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();  
}  
// --></mce: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)> 
<mce:script language="javascript"><!--  
function go(n){  
demo.focus();  
with(document.selection.createRange())  
{  
moveStart("character",n);  
collapse();  
select();  
}  
}  
// --></mce: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 


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/starnight_cbj/archive/2009/02/03/3861105.aspx

分享到：
| 去掉输入中的空格 但是字符串中的光标位置 ...
评论
发表评论

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

相关推荐

    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; } ...

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

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

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

    刚和同事讨论了一个很有趣的问题，有个idea，需要记录用户在页面选中的内容，在ff和ie9下有w3c的dom2级事件createRange，这里不再累赘。主要问题是在IE6,7,8只能通过createTextRange选中热区。假如我们知道用户选择...

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

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

    js实现在文本框光标处添加字符的方法介绍

    var rng=document.selection.createRange(); rng.setEndPoint(“StartToStart”,obj.createTextRange()); var eng=document.selection.createRange(); eng.setEndPoint(“EndToEnd”,obj.createTextRange()); var k

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

    代码如下:IE下有: var range = document.createRange(); FireFox下有： var range = document.body.createTextRange(); IE下有findText及pasteHTML，但是fireFox下就没有！怎么办？查了好多资料，都没有能...

    光标的一些操作总结

    IE下的Range操作比Mozilla下强很... 用这个方法可以使光标在input框最前面 3.光标在最后 代码如下:var r = obj.createTextRange(); r.collapse(false); r.select(); 用这个方法可以使光标停在input框的最后 4.选取inpu

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

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

    js使用小技巧

    获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 (window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"&gt; 无关闭...

    用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. ... i++) { var rng = document.body.createTextRange(); while (rng.

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

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

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

    使用execCommand，需要先从页面选中要复制到剪贴板的内容，如以下代码： 代码如下: var doc = obj.createTextRange(); doc.select(); doc.execCommand(‘copy’); 使用window.clipboardData的方法如下，代码中同时...

    js点击选择文本的方法

    var range = document.body.createTextRange(); range.moveToElementText(document.getElementById('copy')); range.select(); } else if (window.getSelection) { var range = document.createRange();

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

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

    copy.js:由 js 复制！

    其中核心的代码就是一个选中文本的方法： function selectText (element) { var text = element, range, selection; if (body.createTextRange) { // IE range = body.createTextRange();

    javsropt代码

    var r =e.createTextRange(); r.moveStart('character',e.value.length); r.collapse(true); r.select(); } &lt;/script&gt; &lt;input type=text name=text1 value="123" onfocus="cc()...

    高亮显示关键字

    高亮显示 关键字 function HeightLight(Keyword) ... TextRange = document.body.createTextRange(); Found = TextRange.findText(Keyword); if (Found) { Count++; } while (Found && Count &gt; 0) {

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