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 闭包深入理解(closure)
May 27 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
js获取事件源及触发该事件的对象
Oct 24 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
vue.js绑定class和style样式(6)
Dec 09 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
Apr 20 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 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
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
ubuntu 编译安装php 5.3.3+memcache的方法
2010/08/05 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
2011/10/13 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python计算字符宽度的方法
2016/06/14 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
python中rb含义理解
2020/06/18 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
python推导式的使用方法实例
2021/02/28 Python
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
火车来了教学反思
2014/02/11 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
2015年计算机教学工作总结
2015/07/22 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
mysql 索引合并的使用
2021/08/30 MySQL
Go语言 详解net的tcp服务
2022/04/14 Golang