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 字符串乘法
Aug 20 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
Vue.JS入门教程之自定义指令
Dec 08 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
bmob js-sdk 在vue中的使用教程
Jan 21 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
js+h5 canvas实现图片验证码
Oct 11 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之COOKIE支持详解
2010/09/20 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
js自定义回调函数
2015/12/13 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python中cPickle类使用方法详解
2018/08/27 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
意大利网上书店:LaFeltrinelli
2020/06/12 全球购物
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python