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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
php遍历目录方法小结
2015/03/10 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
PHP FileSystem 文件系统常用api整理总结
2019/07/12 PHP
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
跟老齐学Python之总结参数的传递
2014/10/10 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
保险专业大专生求职信
2013/10/26 职场文书
财务部经理岗位职责
2014/02/03 职场文书
房屋转让协议书
2014/04/11 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
初中毕业典礼演讲稿
2014/09/09 职场文书
协商一致解除劳动合同协议书
2014/09/14 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
旗帜观后感
2015/06/08 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang