使用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求平均值的小例子
Nov 29 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
vue组件生命周期详解
Nov 07 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
vue.js实现二级菜单效果
Oct 19 Javascript
微信小程序后端实现授权登录
Feb 24 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正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
Javascript的闭包
2009/12/31 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
python中函数总结之装饰器闭包详解
2016/06/12 Python
详解django三种文件下载方式
2018/04/06 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python实现贪吃蛇双人大战
2020/04/18 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
竟聘演讲稿范文
2013/12/31 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
安全保证书范文
2014/04/29 职场文书
单位委托书怎么写
2014/09/21 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis