使用TextRange获取输入框中光标的位置的代码


Posted in Javascript onMarch 08, 2007

TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? 

    TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化、删除、新增等。但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后使用正则表达式判断输入内容。还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航",核心技术点也是获取输入框中的光标位置。 

    获取输入框中的光标位置的整个代码其实很短,只是这些对象和方法不太常用而已。 
<script language="javascript"> 
function GetCursorPsn(txb) 

    var slct = document.selection; 
    var rng = slct.createRange(); 
    txb.select(); 
    rng.setEndPoint("StartToStart", slct.createRange()); 
    var psn = rng.text.length; 
    rng.collapse(false); 
    rng.select(); 
    return psn; 

</script> 

    要彻底的弄清楚TextRange的具体用法,需要了解与其相关的一些内容,请参考MSDN。 

    这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。对于输入框<input type="text" onkeydown="GetCursorPsn(this)">,它将不能再使用Shift+左右这两个方向键来选择文本;对于<textarea onkeydown="GetCursorPsn(this)"></textarea>,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题,所以基本不用太在意。

Javascript 相关文章推荐
js Html结构转字符串形式显示代码
Nov 15 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
Mar 31 Javascript
js实现文字滚动效果
Mar 03 Javascript
JavaScript的==运算详解
Jul 20 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 #Javascript
JScript内置对象Array中元素的删除方法
Mar 08 #Javascript
在JavaScript中遭遇级联表达式陷阱
Mar 08 #Javascript
原型方法的不同写法居然会影响调试的解决方法
Mar 08 #Javascript
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 #Javascript
JS类库Bindows1.3中的内存释放方式分析
Mar 08 #Javascript
使用IE的地址栏来辅助调试Web页脚本
Mar 08 #Javascript
You might like
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php中require和require_once的区别说明
2014/02/27 PHP
javascript some()函数用法详解
2014/11/13 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js确定对象类型方法
2012/03/30 Javascript
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
详解JS面向对象编程
2016/01/24 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
Bootstrap栅格系统学习笔记
2016/11/25 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue中v-model动态生成的实例详解
2017/10/27 Javascript
Angular 作用域scope的具体使用
2017/12/11 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python中的协程深入理解
2019/06/10 Python
Python timeit模块的使用实践
2020/01/13 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
奥巴马演讲稿
2014/01/08 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
班主任2015新年寄语
2014/12/08 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python