使用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 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
js实现复制粘贴的两种方法
Dec 04 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
德生S2000电路分析
2021/03/02 无线电
获取远程文件大小的php函数
2010/01/11 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
node.js中的console.assert方法使用说明
2014/12/10 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
vue-router权限控制(简单方式)
2018/10/29 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
JS合并两个数组的3种方法详解
2019/10/24 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
Python的条件语句与运算符优先级详解
2015/10/13 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python实现串口自动触发工作的示例
2019/07/02 Python
python中列表的含义及用法
2020/05/26 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
PHP面试题集
2016/12/18 面试题
办公室文书岗位职责
2013/12/16 职场文书
档案检查欢迎词
2014/01/13 职场文书
银行内勤岗位职责
2014/04/09 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
客房部经理岗位职责
2015/02/02 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书