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中实现命名空间
Nov 23 Javascript
如何实现动态删除javascript函数
May 27 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
纯js简单日历实现代码
Oct 05 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
VUE脚手架具体使用方法
May 20 Javascript
简谈创建React Component的几种方式
Jun 15 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 数组使用详解 推荐
2011/06/02 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php数组分页实现方法
2016/04/30 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
javascript数组去重小结
2016/03/07 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
python实现flappy bird小游戏
2018/12/24 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python实现手势识别的示例(入门)
2020/04/15 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
实习教师自我鉴定
2013/12/09 职场文书
播音主持专业个人自我评价
2014/01/09 职场文书
大学生水果店创业计划书
2014/01/28 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
母校寄语大全
2014/04/10 职场文书
寒假家长评语大全
2014/04/16 职场文书
国旗下的演讲稿
2014/05/08 职场文书
法学求职信
2014/06/22 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android