使用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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
Node.js文件操作详解
Aug 16 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
vue实现滑动超出指定距离回顶部功能
Jul 31 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 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
使用adodb lite解决问题
2006/12/31 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
详解Python中的from..import绝对导入语句
2016/06/21 Python
python构建自定义回调函数详解
2017/06/20 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
python中metaclass原理与用法详解
2019/06/25 Python
python实现批处理文件
2020/07/28 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
远程调用的原理
2014/07/05 面试题
财务部经理岗位职责
2014/02/03 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
公务员政审材料范文
2014/12/23 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android