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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
JavaScript中数据结构与算法(一):栈
Jun 19 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
微信小程序中网络请求缓存的解决方法
Dec 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
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
JavaScript面象对象设计
2008/04/28 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
2017/12/25 Javascript
关于vue面试题汇总
2018/03/20 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
python中uuid模块实例浅析
2020/12/29 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
幼儿园中班区域活动总结
2014/07/09 职场文书
《实心球》教学反思
2016/02/23 职场文书