js createRange与createTextRange的一些用法实例

最新推荐文章于 2024-08-02 18:22:43 发布
最新推荐文章于 2024-08-02 18:22:43 发布
阅读量2.6k 收藏 2
点赞数
文章标签： javascript input function character button html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengmeiyanok/article/details/5685158
版权

一、返回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://jb51.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>
/[html]
九、取光标位置
[html]
<body>
<div id=box>点击textarea</div>
<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)
}
// --></script>
<textarea οnclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf

 

 

十、用鼠标选择部分字体，选择的字体就自动粘贴在textarea中 
 
<html>
<script>
function aa(){
newT=document.selection.createRange()
clipboardData.setData("Text",newT.text)
document.all.pp.value=clipboardData.getData("Text")
}
</script>
<span id=ww οnmοuseup=aa()>
测试一下这个中这你好我是skanso
</span>
<textarea name=pp></textarea>
</html>

rita_leng
关注
javascript用createRange拷贝Range片段到粘贴板
qq_36391954的博客
06-16 2310
最近项目需要做一个编辑器，其中有个按钮点击可以将编辑好的文章一键复制到粘贴板，产品的要求是复制好的文章能连带图片和样式一起粘贴到word中。本来打算用clipboard.js来做的，但发现它只能复制文本。在谷歌之后，有了新的方案：利用Range对象选择需要复制的范围，然后将选好的范围复制下来。我用layui的define方法封装了一个对象layui.define(['jquery','layer'...
JS 处理文档选择和范围创建【createRange | getSelection】
mx_csdn的博客
11-09 1215
JS在光标、文本选择方面的应用
document.selection.createRange方法
热门推荐
rfb0204421的专栏
04-01 1万+
document.selection.createRange() 根据当前文字选择返回 TextRange 对象，或根据控件选择返回 ControlRange 对象。配合 execCommand，在 HTML 编辑器中很有用，比如：文字加粗、斜体、复制、粘贴、创建超链接等。 实例一：哈哈。我们都是新生来得。大家都来相互帮助呀。这样我们才能进步，我们才能赚大钱！   实例
javascript中createTextRange用法
Jerry Studio
11-03 897
createtextrange createrange区别: 对象或元素不同，虽然都是返回TextRange。例如：     var r=document.body.createTextRange()     var r=document.createRange()     document. createTextRange 可以对body、TEXTAREA、BUTTON创建TextR
JavaScript CreateRange()操作集锦-JavaScript操作实现上标,下标功能
10-11 4180
JavaScript操作实现上标，下标功能  function TestDivText(divname,SupSub){ //divText=document.selection.createRange().htmlText;//文本 divText=document.selection.createRange().htmlText;//Html文本// alert(divText); if(
javascript设置文本框光标的方法实例小结
10-21
在本文中，我们将深入探讨如何使用JavaScript实现这些功能。 首先，让我们了解如何获取文本框的光标位置。对于`<input type="text">`，我们可以使用以下函数`getCaret(textbox)`： ```javascript function ...
JS中innerHTML和pasteHTML的区别实例分析
11-22
与`innerHTML`不同，`pasteHTML()`需要与`createTextRange()`或`document.selection.createRange()`创建的文本范围对象一起使用。以下是一个使用`pasteHTML()`的例子： ```javascript function addLink() { var ...
TextRange对象和selection对象实例
01-14
### TextRange对象与Selection对象详解 #### 一、概述 在早期的Internet Explorer浏览器中，为了方便用户在网页上操作文本（例如复制、粘贴、查找等），开发了一套独特的对象模型来支持这些功能，其中两个核心对象...
js createRange 方法的作用
weixin_40451732的博客
07-18 229
这个属性，发现它只在元素很长的时候才会生效，那它是怎么判断里面文字的长度的？所以去找了一下源码，就发现了一个这样的方法——在MDN上面也没有详细的介绍。今天的分享就到这里了，感兴趣的朋友可以私下尝试下。，所以要获取文字的宽度就有点麻烦。从页面看，我们如果直接获取。
createRange
weixin_30765505的博客
08-17 294
IE: KE = document.selection; KE_RANGE = KE.createRange(); KE_RANGE_TEXT = KE_RANGE.text;　　　　 var startC = KE_RANGE.parentElement().parentNode; FF: KE =window.getSelection...
关于createTextRange和createRange的一些用法
冷雨夜的专栏
02-03 1万+
转自哪忘了!! 一、返回createTextRange的text和htmlText<!--function test(){var rng=document.body.createTextRange();alert(rng.text)}function test1(){var rng=document.body.createTextRange();
JavaScript中textRange对象使用方法总结
weixin_33816611的博客
03-30 147
　　TextRange对象是动态HTML(DHTML)的高级特性，使用它可以实现很多和文本有关的任务，例如搜索和选择文本。文本范围让您可以选择性的将字符、单词和句子从文档中挑选出来。TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象。 　　下面是TextRange的常用属性与方法： 　属性 boundingHeight 获取绑定TextRange对象的矩...
JavaScript 的 Range 和 DocumentFragment
最新发布
Korbin的博客
08-02 1119
Range对象表示文档中节点和文本节点的一部分。它允许你创建、操作和检测文档中的任意部分。文档：https://developer.mozilla.org/en-US/docs/Web/API/Range。
createRange初探
sunceenjoy的专栏
05-24 3402
<br /> Range 对象的一个代码片段，用createRange()来创建.ie浏览器目前暂不支持，我们要在firefox下使用。<br /> <br />obj.createRange();//这样就生成一个在obj文档的一个区域，所谓区域就是就是该文档的一部分，比如我们用鼠标选中文字或页面的一部分的时候，这就是区域的概念。通过创建range对象后，我们可以对该区域进行增删操作，也可以修改该区域的开始和结束范围等等。具体看下面的代码:<br /> <br /><div id="ok" style="
关于两个不常用的API createRange（处理tooltip展示）和 Shadow DOM（样式隔离）还有 Selection做复制粘贴功能的API
dongheng123的博客
12-14 174
Shadow DOM 允许将隐藏的 DOM 树附加到常规的 DOM 树中——它以 Shadow root 节点为起始根节点，在这个根节点的下方，可以是任意元素，和普通的 DOM 元素一样。1.createRange是我在表格里面看到关于tooltip 当文字长度过长就会有tip没有就不会展示 一直在想这个问题然后看了源码 发现实现就是用这个实现 先附源码。指startContainer， 自然就是指dom元素了，这里startNode。
IE支持的JS的TextRange和selection对象
08-10 259
TextRange对象仅仅IE浏览器支持，Chrome和FF都不支持。 利用TextRange对象，我们可以实现一些与文本有关的任务。比如说，定位，查找。 可以利用createTextRange()方法为input、textarea、body等创建TextRange。例如: var tr = document.body.createTextRange(); TextRange主要的方法有： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值