`
kalogen
  • 浏览: 880117 次
  • 性别: 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的text和htmlText [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 二、获取指定文本框中的选中的文字：只响应第一个文本框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三、页面...

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

    下面我们将详细探讨 `createTextRange()` 的使用方法及其相关知识点。 首先，`createTextRange()` 是针对特定元素（如 `input` 或 `div`）调用的，返回一个表示该元素内文本的 `TextRange` 对象。例如： ```...

    光标定位方法

    这里的关键在于使用`createRange()`方法创建一个范围对象，并通过`moveStart()`方法将光标移动到文本的起始位置，然后通过`text.length`属性计算出光标当前的位置。 ##### Firefox支持 对于Firefox和其他现代...

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

    在支持createRange的现代浏览器如Firefox和IE9中，可以使用createRange来很容易地完成这一任务，但在IE6至IE8中，必须依赖于createTextRange方法。 为了解决问题，我们首先需要理解createTextRange方法的工作原理。...

    JavaScript记录光标在编辑器中位置的实现方法_.docx

    然而，对于不支持这些属性的老版IE浏览器，我们需要使用`document.selection`对象和`createRange()`方法来获取光标位置。以下是一个兼容IE的实现： ```javascript if (typeof(textBox.selectionStart) == "number")...

    javascript网页关键字高亮代码.docx

    `createTextRange()`方法创建TextRange对象，`getBookmark()`和`moveToBookmark(bookmark)`用于保存和恢复Range的位置。 3. **findText()方法**：IE特有的方法，用于在文本中查找指定的字符串，并返回找到的文本...

    js 获取光标在文本框中的位置

    以下是一些关于如何使用JavaScript来实现这一功能的关键知识点： 1. **光标位置概念**： 光标位置指的是用户在文本框中输入时，字符插入点的位置。这个位置可以用一个整数表示，即从字符串的开头到光标处的字符...

    JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容

    在JavaScript中，我们可以使用以下方法来获取和操作这些信息： **获取焦点光标位置**： ```javascript function getCursorPos(input) { if (input.selectionStart) { // Modern browsers return input....

    javascript关键字高亮代码

    本文档提供了一个关于如何使用JavaScript在网页上实现关键词高亮的示例。通过这个例子，我们可以了解到HTML、CSS和JavaScript是如何协同工作的，同时也展示了JavaScript处理DOM的基本方法。对于初学者而言，这是一个...

    js设置文字颜色的方法示例

    在现代浏览器中，使用`document.createRange()`和`window.getSelection()`来获取和操作文本范围。而在旧版本的IE中，使用`document.body.createTextRange()`。 对于现代浏览器，代码如下： ```javascript if ...

    TextRange对象和selection对象实例

    以下是一个简单的示例，演示如何使用`TextRange`和`Selection`对象在网页上查找并替换文本： ```html 文本替换示例 &lt;p&gt;This is an example text to demonstrate the usage of TextRange and Selection ...

    javascript获取以及设置光标位置

    对于IE浏览器，它使用createTextRange和moveStart/moveEnd方法来设置选区的范围，然后使用select方法选中文本。对于非IE浏览器，直接使用setSelectionRange方法来设置选区。 总结以上知识点，我们可以看到在编写跨...

    JavaScript 获取/设置光标位置,兼容Input&amp;&amp;TextArea

    在设置光标位置时，主要使用的方法是`selectionStart`和`selectionEnd`属性（在现代浏览器中），以及使用`document.selection.createTextRange`方法配合`move`和`moveStart`方法（在IE浏览器中）。设置光标位置的...

    javascript获得光标所在的文本框(text textarea)中的位置.docx

    - **`createTextRange()`方法**（IE特有）**：**用于创建一个表示文档中一段文本的`TextRange`对象，并且可以用来移动光标位置或选中文本。 3. **兼容性考虑**： - 不同浏览器对于获取光标位置的支持程度不一，...

    javascript设置文本框光标的方法实例小结

    总的来说，理解并熟练运用这些光标操作方法，能够帮助开发者提升用户体验，使应用程序更加友好和高效。在实际项目中，可以结合其他JavaScript技巧，如事件监听、定时器等，来实现更高级的功能，比如自动聚焦、输入...

    js获取光标位置和设置文本框光标位置示例代码

    在不同的浏览器中，处理光标位置的方法有所不同，主要分为IE浏览器和其他非IE浏览器（如Chrome、Firefox）。 1. **获取光标位置** 对于非IE浏览器，如Chrome和Firefox，可以使用`selectionStart`属性来获取光标...

    javascript实现简单查找与替换的方法

    如果新文本不为空，通过`document.selection.createRange`获取当前选中的文本范围，并使用`text`属性替换为用户输入的新内容。 需要注意的是，在这段代码中，查找和替换操作都是基于用户与页面的交互来实现的。用户...

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