使用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 相关文章推荐
js兼容的placeholder属性详解
Aug 18 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
JS实现FLASH幻灯片图片切换效果的方法
Mar 04 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
微信小程序实现简单文字跑马灯
May 26 Javascript
Vue看了就会的8个小技巧
Jan 21 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编写的导航条程序
2006/10/09 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
Thinkphp模板标签if和eq的区别和比较实例分析
2015/07/01 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
2017/08/30 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
js实现蒙版效果
2020/01/11 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
Python 基础教程之包和类的用法
2017/02/23 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
缴纳养老保险的证明
2014/01/10 职场文书
环保倡议书格式范文
2014/05/14 职场文书
工业设计专业自荐书
2014/06/05 职场文书
技术负责人岗位职责
2015/02/10 职场文书