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实现unicode和字符的互相转换
Jul 18 Javascript
自己的js工具 Event封装
Aug 21 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php实例分享之mysql数据备份
2014/05/19 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
javascript Base类 包含基本的方法
2009/07/22 Javascript
有趣的JavaScript数组长度问题代码说明
2011/01/20 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jQuery焦点图切换特效代码分享
2015/09/15 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
vuex的使用步骤
2021/01/06 Vue.js
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python实现用户答题功能
2018/01/17 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
基于python指定包的安装路径方法
2018/10/27 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python实现TCP通信的示例代码
2019/09/09 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
美国时尚大码女装购物网站:Avenue
2019/05/24 全球购物
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
黄埔军校观后感
2015/06/10 职场文书
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Python借助with语句实现代码段只执行有限次
2022/03/23 Python