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 到 JQuery (1)学习小结
Feb 12 Javascript
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
Vue2.0 UI框架ElementUI使用方法详解
Apr 14 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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默认安装产生系统漏洞
2006/10/09 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
vue 点击按钮实现动态挂载子组件的方法
2018/09/07 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python OpenCV获取视频的方法
2018/02/28 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
基于keras中的回调函数用法说明
2020/06/17 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
《一件运动衫》教学反思
2014/02/19 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
施工质量承诺书范文
2014/05/30 职场文书
安全标语口号
2014/06/09 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
党课主持词大全
2015/06/30 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python