使用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 使用技巧精萃(.net html
Apr 25 Javascript
JavaScript 题型问答有答案参考
Feb 17 Javascript
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
Javascript中window.name属性详解
Nov 19 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 读取Postgresql中的数组
2013/04/14 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
2012/11/01 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
jQuery对象与DOM对象之间的相互转换
2015/03/03 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
九步学会Python装饰器
2015/05/09 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
python 编写简单网页服务器的实例
2018/06/01 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
作弊检讨书1000字
2014/02/01 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
教师节祝酒词
2015/08/11 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL
JavaScript函数柯里化
2021/11/07 Javascript
Flink 侧流输出源码示例解析
2022/09/23 Servers