使用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下javascript的兼容写法小结
Dec 10 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
JavaScript实现淘宝商品图切换效果
Apr 29 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 各种排序算法实现代码
2009/08/20 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
Node.js学习入门
2017/01/03 Javascript
详解vue父子模版嵌套案例
2017/03/04 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
2018/01/22 jQuery
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
Django的models模型的具体使用
2019/07/15 Python
解决Django连接db遇到的问题
2019/08/29 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
英国网上花店:Bunches
2016/11/29 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
高一物理教学反思
2014/01/24 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
多媒体教室标语
2014/06/26 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
农业生产宣传标语
2014/10/08 职场文书
小学感恩节活动总结
2015/03/24 职场文书
入党积极分子考察意见
2015/06/02 职场文书
师范生小学见习总结
2015/06/23 职场文书
幼儿园开学报名通知
2015/07/16 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
pandas提升计算效率的一些方法汇总
2021/05/30 Python
python for循环赋值问题
2021/06/03 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android