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


Posted in Javascript onOctober 14, 2006

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 cookies实现简单统计访问次数
Nov 24 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
Javascript函数式编程语言
Oct 11 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
js实现表格单列按字母排序
Aug 12 Javascript
JS代码格式化和语法着色V2
Oct 14 #Javascript
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 #Javascript
动态加载js文件 document.createElement
Oct 14 #Javascript
不错的asp中显示新闻的功能
Oct 13 #Javascript
简单JS代码压缩器
Oct 12 #Javascript
jQuery 1.0.2
Oct 11 #Javascript
Firefox 无法获取cssRules 的解决办法
Oct 11 #Javascript
You might like
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
PHP strtotime函数详解
2009/12/18 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
jQuery中Dom的基本操作小结
2014/01/23 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
详解如何使用router-link对象方式传递参数?
2019/05/02 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
python 正则式 概述及常用字符
2009/05/07 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python 读取指定文件夹下的所有图像方法
2018/04/27 Python
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
12岁生日演讲稿
2014/05/14 职场文书
单位授权委托书范文
2014/08/02 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
新年祝酒词大全
2015/08/11 职场文书