使用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 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
JQuery 学习笔记 选择器之二
Jul 23 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
Jun 25 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
Jul 28 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
js中通过getElementsByName访问name集合对象的方法
Oct 31 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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检测图片木马多进制编程实践
2013/04/11 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php实现微信模板消息推送
2018/03/30 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
js实现抽奖效果
2017/03/27 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
[28:48]《真视界》- 2017年国际邀请赛
2017/09/27 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
.img/.hdr格式转.nii格式的操作
2020/07/01 Python
Python执行时间的几种计算方法
2020/07/31 Python
Python安装Bs4的多种方法
2020/11/28 Python
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
单位单身证明范本
2014/01/11 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
信访稳定工作汇报
2014/10/27 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
明星邀请函
2015/02/02 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书