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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
Aug 28 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
nuxt 每个页面head标签内容设置方式
Nov 05 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
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
前端性能优化及技巧
2016/05/06 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
使用cropper.js裁剪头像的实例代码
2017/09/29 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python ftp上传文件
2016/02/13 Python
python实现实时监控文件的方法
2016/08/26 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
早读迟到检讨书
2014/01/24 职场文书
说明书怎么写
2014/05/06 职场文书
自主招生教师推荐信
2014/05/10 职场文书
学生党员批评与自我批评
2014/10/15 职场文书
员工自我评价范文
2015/03/11 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers