使用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 相关文章推荐
为数据添加append,remove功能
Oct 03 Javascript
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
详解javascript void(0)
Jul 13 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&amp;MYSQL分页原理及实现
2007/01/02 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
Laravel框架中扩展函数、扩展自定义类的方法
2014/09/04 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
jquery 问答知识整理
2010/02/11 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
AngularJs html compiler详解及示例代码
2016/09/01 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Python pass 语句使用示例
2014/03/11 Python
讲解Python中的递归函数
2015/04/27 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
python通过txt文件批量安装依赖包的实现步骤
2019/08/13 Python
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
职业规划实施方案
2014/06/10 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
退学证明范本3篇
2014/10/29 职场文书
无罪辩护词范文
2015/05/21 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python