使用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 相关文章推荐
jquery 插件学习(一)
Aug 06 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JavaScript在网页中画圆的函数arc使用方法
Nov 13 Javascript
Google Maps基础及实例解析
Aug 06 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
加速vue组件渲染之性能优化
Apr 09 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
基于文本的访客签到簿
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP使用观察者模式处理异常信息的方法详解
2019/09/24 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
ExtJS下 Ext.Direct加载和提交过程排错小结
2013/04/02 Javascript
js 窗口抖动示例
2013/09/04 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
node.js中watch机制详解
2014/11/17 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
js的三种继承方式详解
2017/01/21 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Python面向对象程序设计示例小结
2019/01/30 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
python中count函数简单用法
2020/01/05 Python
django修改models重建数据库的操作
2020/03/31 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
大学四年规划书范文
2013/12/27 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
企业晚会策划方案
2014/05/29 职场文书
内乡县衙导游词
2015/02/05 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
工程进度款催款函
2015/06/24 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python