使用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 相关文章推荐
一个简单的javascript类定义例子
Sep 12 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
Highcharts入门之简介
Aug 02 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
jquery实现轮播图效果
Feb 13 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
bootstrap paginator分页前后台用法示例
Jun 17 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue实现购物车的监听
2020/04/20 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
Python控制台实现交互式环境执行
2020/06/09 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
网上常见的一份Linux面试题(多项选择部分)
2015/02/07 面试题
共产党员岗位承诺书
2014/05/29 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2016年寒假家长评语
2015/10/10 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python