使用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 Math对象
Aug 13 Javascript
Javascript处理DOM元素事件实现代码
May 23 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
js中settimeout方法加参数
Feb 28 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
js实现3D图片展示效果
Mar 09 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 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 foreach如何跳出两层循环(详解)
2016/11/05 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Vue常用的全选/反选的示例代码
2020/02/19 Javascript
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python中异常重试的解决方案详解
2017/05/05 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
实践Vim配置python开发环境
2018/07/02 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
工作评语大全
2014/04/26 职场文书
继承公证书格式
2015/01/26 职场文书
放假通知范文
2015/04/14 职场文书
特种设备安全管理制度
2015/08/06 职场文书
党员理论学习心得体会
2016/01/21 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang