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


Posted in Javascript onFebruary 24, 2014
<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" 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="确定"> 
<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" onclick=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://toto369.net" onfocus="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="得到光标位置" onclick=getPos(txt1)>

控制input框内光标位置
<script language="javascript"> 
function setPos(num) 
{ 
text1.focus(); 
var e =document.getElementById("text5"); 
var r =e.createTextRange(); 
r.moveStart('character',num); 
r.collapse(true); 
r.select(); 
} 
</script> 
<input type="text" id="text5" 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>

选中文本框中的一段文字
<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 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)> 
<script language="javascript"> 
function go(n){ 
demo.focus(); 
with(document.selection.createRange()) 
{ 
moveStart("character",n); 
collapse(); 
select(); 
} 
} 
</script>
Javascript 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
前端深入理解Typescript泛型概念
Mar 09 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 #Javascript
对table和ul实现js分页示例分享
Feb 24 #Javascript
jquery.post用法之type设置问题
Feb 24 #Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 #Javascript
js获得页面的高度和宽度的方法
Feb 23 #Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 #Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 #Javascript
You might like
php实现文件下载实例分享
2014/06/02 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
jquery 图片轮换效果
2010/07/29 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
2016/12/05 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
JavaScript实现随机点名小程序
2020/10/29 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
物流专业大学生求职信范文
2013/10/28 职场文书
应届生人事助理求职信
2013/11/09 职场文书
竞职演讲稿范文
2014/01/11 职场文书
党支部承诺书范文
2014/03/28 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript