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 相关文章推荐
JavaScript中的apply()方法和call()方法使用介绍
Jul 25 Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
使用PHP socke 向指定页面提交数据
2008/07/23 PHP
PHP 字符串 小常识
2009/06/05 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
js表数据排序 sort table data
2009/02/18 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
jQuery显示和隐藏 常用的状态判断方法
2015/01/29 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
移动端界面的适配
2017/01/11 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
opencv之为图像添加边界的方法示例
2019/12/26 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
利用python绘制正态分布曲线
2021/01/04 Python
美国糖果店:Sugarfina
2019/02/21 全球购物
团组织关系介绍信
2014/01/12 职场文书
小学生安全责任书
2014/07/25 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
学校食品安全责任书
2015/01/29 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
Golang获取List列表元素的四种方式
2022/04/20 Golang