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进行的DDoS攻击原理与防御
Jun 04 Javascript
js实现延迟加载的方法
Jun 24 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
微信小程序实现页面分享onShareAppMessage
Aug 12 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
js将json格式的对象拼接成复杂的url参数方法
2016/05/25 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
Javascript中 toFixed四舍六入方法
2017/08/21 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
Python猴子补丁知识点总结
2020/01/05 Python
Python list运算操作代码实例解析
2020/01/20 Python
浅谈Tensorflow加载Vgg预训练模型的几个注意事项
2020/05/26 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
python中类与对象之间的关系详解
2020/12/16 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
银行演讲稿范文
2014/01/03 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
跑吧孩子观后感
2015/06/10 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis