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的日期选择控件
Oct 27 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
JS实现div居中示例
Apr 17 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
vue中@change兼容问题详解
Oct 25 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
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
javascript 函数使用说明
2010/04/07 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
2017/09/15 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
Python 搭建Web站点之Web服务器与Web框架
2016/11/06 Python
Python实现判断并移除列表指定位置元素的方法
2018/04/13 Python
Python格式化日期时间操作示例
2018/06/28 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
在linux下实现 python 监控usb设备信号
2019/07/03 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
Python中猜拳游戏与猜筛子游戏的实现方法
2020/09/04 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
一套带网友答案的.NET笔试题
2016/12/06 面试题
实习鉴定范文
2013/12/19 职场文书
班主任评语大全
2014/04/26 职场文书
医生个人年度总结
2015/02/28 职场文书
大学团日活动总结书
2015/05/11 职场文书
Elasticsearch 批量操作
2022/04/19 Python