使用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 相关文章推荐
关于递归运算的顺序测试代码
Nov 30 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Node.js 条形码识别程序构建思路详解
Feb 14 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
JQuery动画和停止动画实例代码
2013/03/01 Javascript
同时使用n个window onload加载实例介绍
2013/04/25 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
axios学习教程全攻略
2017/03/26 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
vue开发环境配置跨域的方法步骤
2019/01/16 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
pyqt和pyside开发图形化界面
2014/01/22 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python中django学习心得
2017/12/06 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
中学优秀班主任事迹材料
2014/05/01 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书