使用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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
js几个验证函数代码
Mar 25 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
详解React 条件渲染
Jul 08 Javascript
解决vue中的无限循环问题
Jul 27 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
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
2013/10/17 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
python3连接kafka模块pykafka生产者简单封装代码
2019/12/23 Python
在python image 中实现安装中文字体
2020/05/16 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Python监听键盘和鼠标事件的示例代码
2020/11/18 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
移动端html5 meta标签的神奇功效
2016/01/06 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
AJAX的优缺点都有什么
2015/08/18 面试题
生产部统计员岗位职责
2014/01/05 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
抄作业检讨书
2014/02/17 职场文书
社会调查研究计划书
2014/05/01 职场文书
先进党员事迹材料
2014/12/24 职场文书
初中成绩单评语
2014/12/29 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python