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系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
js实现带搜索功能的下拉框
Jan 11 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php防止sql注入代码实例
2013/12/18 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
javascript闭包的高级使用方法实例
2013/07/04 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
vue2组件实现懒加载浅析
2017/03/29 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
python pillow库的基础使用教程
2021/01/13 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
个人自我评价分享
2013/12/20 职场文书
入职担保书范文
2014/05/21 职场文书
债务纠纷委托书
2014/08/30 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
商场收银员岗位职责
2015/04/07 职场文书
文明礼貌主题班会
2015/08/14 职场文书
学校团代会开幕词
2016/03/04 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS