使用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 相关文章推荐
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
加速IE的Javascript document输出的方法
Dec 02 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
微信JS接口大全
Aug 25 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
详解vue2.0组件通信各种情况总结与实例分析
Mar 22 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
基于React+Redux的SSR实现方法
Jul 03 Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 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
COM in PHP (winows only)
2006/10/09 PHP
第十三节--对象串行化
2006/11/16 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
Destoon实现多表查询示例
2014/08/21 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
PHP制作用户注册系统
2015/10/23 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
浙大网新C/C++面试解惑
2015/05/27 面试题
预备党员转正考核材料
2014/06/03 职场文书
树转促学习心得体会
2014/09/10 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
农村老人去世追悼词
2015/06/23 职场文书
导游词之日月潭
2019/11/05 职场文书