使用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 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
jQuery中页面返回顶部的方法总结
Dec 30 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
javascript实现移动端上传图片功能
Aug 18 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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
PHP 程序员的调试技术小结
2009/11/15 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
一些mootools的学习资源
2010/02/07 Javascript
js 函数的副作用分析
2011/08/23 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
2017/12/16 jQuery
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python导入坐标点的具体操作
2019/05/10 Python
在Pytorch中计算卷积方法的区别详解(conv2d的区别)
2020/01/03 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
蛋糕店的商业计划书范文
2014/01/27 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
学生会主席竞聘书
2014/03/31 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
长城英文导游词
2015/01/30 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL