关于createTextRange和createRange的一些用法

最新推荐文章于 2022-03-09 16:05:40 发布
最新推荐文章于 2022-03-09 16:05:40 发布
阅读量881 收藏
点赞数
分类专栏： WEB开发 文章标签： JavaScript Go .net Blog ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kalogen/article/details/83698460
版权

一、返回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" ο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="确定"> 
<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" οnclick=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" οnfοcus="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="得到光标位置" οnclick=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 ο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> 
 
 
七、选中文本框中的一段文字  
 
<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 ο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)> 
<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 οnclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf 


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

kalogen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
createRange初探
sunceenjoy的专栏
05-24 3372
<br /> Range 对象的一个代码片段，用createRange()来创建.ie浏览器目前暂不支持，我们要在firefox下使用。<br /> <br />obj.createRange();//这样就生成一个在obj文档的一个区域，所谓区域就是就是该文档的一部分，比如我们用鼠标选中文字或页面的一部分的时候，这就是区域的概念。通过创建range对象后，我们可以对该区域进行增删操作，也可以修改该区域的开始和结束范围等等。具体看下面的代码:<br /> <br /><div id="ok" style="
JS 处理文档选择和范围创建【createRange | getSelection】
最新发布
mx_csdn的博客
11-09 907
JS在光标、文本选择方面的应用
js createRange与createTextRange的一些用法实例
01-19
一、返回createTextRange的text和htmlText [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 二、获取指定文本框中的选中的文字：只响应第一个文本框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三、页面文本倒序查找 abababababababa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 四、聚焦控件后把光标放到最后 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 五、得到文本框内光标位置 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 六、控制input框内光标位
Range对象介绍
问白的博客
03-20 5583
在web中有个不常用，但挺强大的一个对象Range。他表示一个包含节点与文本节点的一部分的文档片段。 1、创建Range实例 有三种办法可以得到一个Range, 一旦一个 Range 对象被建立，在使用他的大多数方法之前需要去设置他的临界点 通过 Range() 构造函数来得到Range, 新创建的对象属于全局 Document 对象 通过 Document.createRange 方法创建 Range 通过 Selection 对象来获取range 下面我们来一一介绍，介绍例子时候，使用一份html文
Range 对象
shenwen5225的博客
01-27 654
文章目录对象只读属性对象方法 Range 对象表示一个包含节点与文本节点的一部分的文档片段。 浏览器支持：IE9+ 及主流浏览器都支持，其中有少数几个方法个别浏览器不支持。 获取 Range 对象 1.Document.createRange 方法创建 Range。 var range = document.createRange(); 2.通过 Document 对象的构造函数 Range()...
createTextRange()的使用示例含文本框选中部分文字内容
09-04
下面我们将详细探讨 `createTextRange()` 的使用方法及其相关知识点。 首先，`createTextRange()` 是针对特定元素（如 `input` 或 `div`）调用的，返回一个表示该元素内文本的 `TextRange` 对象。例如： ```...
js设置文字颜色的方法示例
11-27
在现代浏览器中，使用`document.createRange()`和`window.getSelection()`来获取和操作文本范围。而在旧版本的IE中，使用`document.body.createTextRange()`。 对于现代浏览器，代码如下： ```javascript if ...
JS中innerHTML和pasteHTML的区别实例分析
11-22
与`innerHTML`不同，`pasteHTML()`需要与`createTextRange()`或`document.selection.createRange()`创建的文本范围对象一起使用。以下是一个使用`pasteHTML()`的例子： ```javascript function addLink() { var ...
理解HTML5中Range对象
weixin_30755393的博客
08-19 435
1.理解Range对象 重新来学习下HTML5中的Range对象和Selection对象，最近在维护富文本编辑器，感觉这方面的知识点很有用，所以趁着周末多学习下~ 什么是Range对象？ 在HTML5中，一个Range对象代表页面上的一段连续区域。可以通过如下语句创建一个空的Range对象。如下代码： var range = document.createRange();...
javascript用createRange拷贝Range片段到粘贴板
qq_36391954的博客
06-16 2245
最近项目需要做一个编辑器，其中有个按钮点击可以将编辑好的文章一键复制到粘贴板，产品的要求是复制好的文章能连带图片和样式一起粘贴到word中。本来打算用clipboard.js来做的，但发现它只能复制文本。在谷歌之后，有了新的方案：利用Range对象选择需要复制的范围，然后将选好的范围复制下来。我用layui的define方法封装了一个对象layui.define(['jquery','layer'...
Append text to TextArea in the currentcursor position
rongwenbin的专栏
08-09 852
Append text to TextArea in the current cursor position I've a question, about how to append text to the TextArea, I need to create WYSIWYG text editor which is created with ExtJs 4. Currently what I
createTextRange()的使用(含文本框选中部分文字内容)
bingjie1217的专栏
02-24 2042
function test() { var rng=document.body.createTextRange(); alert(rng.text) } function test1() { var rng=document.body.createTextRange(); alert(rng.htmlText) } 获取指定文本框中的选中的文字：只响应第一个
createTextRange()方法在js中有什么作用，以及验证输入是否为数字及获得文本框的焦点
wangbenliang的专栏
07-07 410
主要是用来对一些文本对象进行操作.比如你有一大段文字,都在同一个P标签内,但是你只希望通过JS改变其中的一小部分,这时就可以用createTextRange来创建Range对象操作文本.因为默认情况下文本只是文本,并不是对象,要想像操作对象那样操作文本,只能是创建为Range对象.这是要操作的文本就具有了对象的功能和特性了. 比如：
让textarea光标定位到最后，createTextRange在chrome和foxfire中是没有效果
但行好事 莫问前程
03-09 771
点击跳转查看
DOM中的范围 createRange()
weixin_30654583的博客
01-05 287
学习《JavaScript 高级程序设计》 12章dom范围的笔记 dom2级在Document类型中定义了 createRange()方法； 创建range对象很简单var range = document.createRange() 操作range对象，有两个步骤，1选择节点，2,操作节点 选择节点： 最简单的选择节点方法： selectNode():选择整个节点，包括子节...
查找页面内容方法document.body.createTextRange(),兼容火狐，ie的写法
qq_32824609的博客
04-18 5049
.Export 报错：方法和数据成员未找到
07-09
要导出图片，可以使用Shape对象的Copy方法将图片复制到剪贴板，然后使用Clipboard对象的GetData方法将图像数据保存为文件。 以下是一个示例代码，用于导出当前文档中的所有图片，并设置清晰度为96： ```vba Sub ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值