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的让页面控件不可用的实现代码
Apr 27 Javascript
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
JS实现日期加减的方法
Nov 29 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
2019/06/26 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
详解Python中的join()函数的用法
2015/04/07 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
如何在django中实现分页功能
2020/04/22 Python
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
珍惜资源保护环境的建议书
2014/05/14 职场文书
建筑工地宣传标语
2014/06/18 职场文书
打架检讨书范文
2015/01/27 职场文书
小学推普周活动总结
2015/05/07 职场文书
初中团支书竞选稿
2015/11/21 职场文书
关于Redis的主从复制及哨兵问题
2022/06/16 Redis
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS