使用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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JavaScript中操作字符串小结
May 04 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
JavaScript如何操作css
Oct 24 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP图片裁剪与缩放示例(无损裁剪图片)
2017/02/08 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
英国知名奢侈品包包品牌:Milli Millu
2016/12/22 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
李敖北大演讲稿
2014/05/24 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
摩登时代观后感
2015/06/03 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
班主任培训研修日志
2015/11/13 职场文书