使用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 相关文章推荐
jquery鼠标停止移动事件
Dec 21 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
js实现仿Windows风格选项卡和按钮效果实例
May 13 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
DOM 事件的深入浅出(二)
Dec 05 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
Vue列表渲染的示例代码
Nov 01 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
js实现简单的轮播图效果
Dec 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
如何在PHP程序中防止盗链
2008/04/09 PHP
mysql总结之explain
2012/02/27 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
PHP闭包函数详解
2016/02/13 PHP
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
详解python3中socket套接字的编码问题解决
2017/07/01 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python matplotlib画图实例代码分享
2017/12/27 Python
Python中常见的异常总结
2018/02/20 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Django URL参数Template反向解析
2020/11/24 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
国贸专业个人求职信范文
2014/01/08 职场文书
趣味体育活动方案
2014/02/08 职场文书
双语教学实施方案
2014/03/23 职场文书
村长贪污检举信
2014/04/04 职场文书
环境建议书
2015/02/04 职场文书
爱心募捐通知范文
2015/04/27 职场文书
国家助学金受助感言
2015/08/01 职场文书
2016元旦主持人开场白
2015/12/03 职场文书