使用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 相关文章推荐
js用图作提交按钮或超连接
Mar 26 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
幻灯片带网页设计中的20个奇妙应用示例小结
May 27 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
JavaScript实现简单进度条效果
Mar 25 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上传图片客户端和服务器端实现方法
2015/03/30 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
ArrayList类(增强版)
2007/04/04 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
微信小程序获取用户openid的实现
2018/12/24 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
vue中h5端打开app(判断是安卓还是苹果)
2021/02/26 Vue.js
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python的subprocess模块总结
2014/11/07 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
详解python tkinter模块安装过程
2020/01/06 Python
python属于解释型语言么
2020/06/15 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
2014自主招生自荐信策略
2014/01/27 职场文书
大学生就业自荐书
2014/06/16 职场文书
校庆团日活动总结
2014/08/28 职场文书
世界遗产导游词
2015/02/13 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
MySQL创建管理HASH分区
2022/04/13 MySQL