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 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
在JS循环中使用async/await的方法
Oct 12 Javascript
js实现的在本地预览图片功能示例
Nov 09 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
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实现冒泡排序的简单实例
2016/05/26 PHP
laravel入门知识点整理
2020/09/15 PHP
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
javascript折半查找详解
2015/01/26 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python程序退出方式小结
2017/12/09 Python
浅析python中的迭代与迭代对象
2018/10/08 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
python 贪心算法的实现
2020/09/18 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
python使用smtplib模块发送邮件
2020/12/17 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
医生爱岗敬业演讲稿
2014/08/26 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
超市创业计划书
2014/09/15 职场文书
世界文化遗产导游词
2015/02/13 职场文书
行政经理岗位职责
2015/04/15 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang