使用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 delete操作符应用实例
Jan 13 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
alert出数组中的随即值代码
Sep 25 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
请php正则走开
2008/03/15 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
AngularJS实现表单验证功能
2017/01/09 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python tkinter canvas使用实例
2019/11/04 Python
python3正则模块re的使用方法详解
2020/02/11 Python
pyecharts绘制中国2020肺炎疫情地图的实例代码
2020/02/12 Python
python微信公众号开发简单流程实现
2020/03/09 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
服务生自我鉴定
2014/01/22 职场文书
信息工作经验交流材料
2014/05/28 职场文书
施工安全保证书
2015/05/09 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
十月围城观后感
2015/06/08 职场文书
小学语文教学随笔
2015/08/14 职场文书