使用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 相关文章推荐
javascript自动改变文字大小和颜色的效果的小例子
Aug 02 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
使用vue构建移动应用实战代码
Aug 02 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
jquery实现垂直手风琴菜单
Mar 04 jQuery
获取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
php PDO中文乱码解决办法
2009/07/20 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
PHP比你想象的好得多
2014/11/27 PHP
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JS网页图片按比例自适应缩放实现方法
2014/01/15 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python去除扩展名的实例讲解
2018/04/23 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python基于Selenium的web自动化框架
2019/07/14 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
Pycharm生成可执行文件.exe的实现方法
2020/06/02 Python
浅析Python requests 模块
2020/10/09 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
大学生自我评价怎样写好
2013/10/23 职场文书
终端业务员岗位职责
2013/11/27 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
营销计划书
2015/01/17 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
Java实现房屋出租系统详解
2021/10/05 Java/Android