使用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 相关文章推荐
js防止表单重复提交实现代码
Sep 05 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
基于react组件之间的参数传递(详解)
Sep 05 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
May 21 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 07 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
介绍一些PHP判断变量的函数
2012/04/24 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
关于this和self的使用说明
2010/08/01 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python备份文件的脚本
2008/08/11 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python 瀑布线指标编写实例
2020/06/03 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
委托公证书
2014/04/08 职场文书
遗产继承公证书
2014/04/09 职场文书
2014年团支书工作总结
2014/11/14 职场文书
全陪导游词
2015/02/04 职场文书
结婚十年感言
2015/07/31 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书