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 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
详解React native fetch遇到的坑
Aug 30 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
node事件循环和process模块实例分析
Feb 14 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实现json_decode不转义中文的方法
2017/05/20 PHP
java解析json方法总结
2019/05/16 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vue中el-input绑定键盘按键(按键修饰符)
2020/07/22 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python元组操作实例解析
2014/09/23 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Django与JS交互的示例代码
2017/08/23 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python利用线程实现多任务
2020/09/18 Python
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
C语言面试题
2015/10/30 面试题
试用期员工考核制度
2014/01/22 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
客房部经理岗位职责
2015/02/02 职场文书
社会实践活动总结
2015/02/05 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
mysql全面解析json/数组
2022/07/07 MySQL