使用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 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
使用js判断数组中是否包含某一元素(类似于php中的in_array())
Dec 12 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 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
重置版宣传动画
2020/04/09 魔兽争霸
Discuz! Passport 通行证整合
2008/03/27 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php格式化金额函数分享
2015/02/02 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
Python制作Windows系统服务
2017/03/25 Python
Python中的TCP socket写法示例
2018/05/11 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Django自带的加密算法及加密模块详解
2019/12/03 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
python中如何设置代码自动提示
2020/07/15 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
服务口号大全
2014/06/11 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
订货会主持词
2015/07/01 职场文书