JavaScript createRange与createTextRange用法详解
本文详细解析JavaScript中createRange与createTextRange对象的多种应用场景。内容涵盖获取文本与HTML内容、指定文本框选中文字提取、页面文本倒序查找、光标位置获取与控制、选区生成及鼠标自动粘贴等功能。通过具体代码实例，展示如何在IE兼容模式下处理复杂的文本交互与DOM操作需求。
获取文本与HTML内容
获取createTextRange对象的text属性和htmlText属性值。
<input type="button" onclick="test()" value="text"> <input type="button" onclick="test1()" value="htmlText"> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
提取指定文本框选中文字
从指定文本框中提取被选中的文字，该逻辑仅对第一个文本框生效。
<input id="inp1" type="text" value="1234567890"> <input id="inp2" type="text" value="9876543210"> <input type="button" onclick="test()" value="确定"> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
页面文本倒序查找
在页面文本中执行反向查找（倒序查找）。
abababababababa <input value="倒序查找a" onclick=myfindtext("a") type="button"> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
控件聚焦时光标定位
当控件获得焦点时，将光标自动定位到文本末尾。
<input type="text" value="http://jb51.net" onfocus="setFocus()"> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
获取与设置光标位置
计算并返回文本框内部当前光标的索引位置。
<input type="text" id="txt1" value="1234567890"> <input type="button" value="得到光标位置" onclick=getPos(txt1)> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
通过编程方式动态控制input元素内部光标的具体位置。
<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> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
文本选区与光标移动控制
在文本框中选定指定的一段文字范围。
<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> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
控制文本框内部光标的移动方向与步长。
<input type="button" value="<" onclick=go(-1)> <input id="demo" value="这里是文字"> <input type="button" value=">" onclick=go(1)> /[html] 九、取光标位置 [html] <body> <div id=box>点击textarea</div> <textarea onclick=doit() rows="6" cols="33">sdfsdfsdfsdfsdfsdfsdf [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
鼠标选择自动粘贴功能
实现鼠标选中文本后自动将其粘贴到textarea元素中。
<html> <span id=ww onmouseup=aa()> 测试一下这个中这你好我是skanso </span> <textarea name=pp></textarea> </html> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑
2026-11-05 16:19:37
JavaScript怎么读写LocalStorage与SessionStorage
2026-11-05 15:40:11
anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库
2026-11-05 11:24:55
flv.js 与 hls.js 在直播场景下的选型对比
2026-11-05 08:18:52
JavaScript能做什么？前端开发中的作用与应用场景解析
2026-11-04 23:17:54