使用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 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
Javascript 构造函数详解
Oct 22 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
基于javascript如何传递特殊字符
Nov 30 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 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.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
解析左右值无限分类的实现算法
2013/06/20 PHP
PHP获取数组最大值下标的方法
2015/05/12 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
动手学习无线电
2021/03/10 无线电
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
学习JavaScript设计模式之状态模式
2016/01/08 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue写h5页面的方法总结
2019/02/12 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
python读写二进制文件的方法
2015/05/09 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
Python3.8安装Pygame教程步骤详解
2020/08/14 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
餐厅总厨求职信
2014/03/04 职场文书
读群众路线心得体会
2014/03/07 职场文书
院系推荐意见
2015/06/05 职场文书