使用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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
浅谈如何使用webpack构建多页面应用
May 30 Javascript
JavaScript常见JSON操作实例分析
Aug 08 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
React Fragment介绍与使用详解
Nov 11 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
图书管理程序(三)
2006/10/09 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
解决layui动态添加的元素click等事件触发不了的问题
2019/09/20 Javascript
python检测是文件还是目录的方法
2015/07/03 Python
深入理解python try异常处理机制
2016/06/01 Python
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
pytorch 预训练层的使用方法
2019/08/20 Python
python编程的核心知识点总结
2021/02/08 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
红色康乃馨酒店:Red Carnation Hotels
2017/06/22 全球购物
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
体育教师求职信
2014/05/24 职场文书
导游词开场白
2015/01/31 职场文书
2015年乡镇党务公开工作总结
2015/05/19 职场文书
运动会观后感
2015/06/09 职场文书
入党转正申请书范文
2019/05/20 职场文书
Python3接口性能测试实例代码
2021/06/20 Python
Java移除无效括号的方法实现
2021/08/07 Java/Android