使用TextRange获取输入框中光标的位置的代码

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。不过这个副作用基本不会给我们使用文本框带来什么大的问题，所以基本不用太在意。

赞 (0)

相关推荐

  • Using the TextRange Object

    Most users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text manipulation that can be done using a "text range" object. The TextRange obje

  • 光标定位等TextRange的操作的范例代码

    光标位置 INPUT{border: 1 solid #000000} BODY,TABLE{font-size: 10pt} 点击 TextArea 实现光标定位 我怕来不及我要抱着你,直到感觉你的绉纹有了岁月的痕迹,直到视线变得模糊直到不能呼吸 为了你我愿意 动也不能动也要看着你,直到感觉你的发线有了白雪的痕迹,直到肯定你是真的直到失去力气让我们形影不离 如果全世界我也可以放弃,至少还有你值得我去珍惜而你在这里就是生命的奇迹 也许全世界我也可以忘记,就是不愿意失去你的消息你掌心的痣我总记得在

  • JavaScript中textRange对象使用方法小结

    TextRange对象是动态HTML(DHTML)的高级特性,使用它可以实现很多和文本有关的任务,例如搜索和选择文本.文本范围让您可以选择性的将字符.单词和句子从文档中挑选出来.TextRange对象是在HTML文档将要显示的文本流上建立开始和结束位置的抽象对象. 下面是TextRange的常用属性与方法: 属性 boundingHeight 获取绑定TextRange对象的矩形的高度 boundingLeft 获取绑定TextRange 对象的矩形左边缘和包含TextRange对象的左侧之间的

  • createTextRange()的使用示例含文本框选中部分文字内容

    复制代码 代码如下: <script language="javascript"> function test() { var rng=document.body.createTextRange(); alert(rng.text) } function test1() { var rng=document.body.createTextRange(); alert(rng.htmlText) } </script> <input type="b

  • js createRange与createTextRange的一些用法实例

    一.返回createTextRange的text和htmlText [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 二.获取指定文本框中的选中的文字:只响应第一个文本框 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 三.页面文本倒序查找 abababababababa [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 四.聚焦控件后把光标放到最后 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 五.得到文本框内光标位置 [Ctrl+A 全选 注:如

  • 处理文本部分内容的TextRange对象应用实例

    因用户要求方与TextRange对象结缘,用于处理JavaScript对象文本部分内容的一个对象. TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出

  • 教学演示-UBB,剪贴板,textRange及其他

    这是一个给新手学习代码的帖子,包含以下内容: 如何使用UBB代码,如何用js与剪贴板交互,如何使用textRange对象,如何使用自定义的快捷键操作,如何自动随窗口大小调整页面内容尺寸,正则表达式的使用等等 请仔细阅读代码,有问题请提问,目前代码开发完成度80%,IE only Blue Idea UBB Code Edit * { margin:0px; padding:0px; } html, body { background-color:buttonface; width:100%; h

  • 使用TextRange获取输入框中光标的位

    TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后

  • 使用TextRange获取输入框中光标的位置的代码

    TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了.不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化.删除.新增等.但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置.其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后

  • javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    javascript getBoundingClientRect() 来获取页面元素的位置的代码[修正版]第1/2页

    document.documentElement.getBoundingClientRect下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect()Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate

  • 用Javascript 获取页面元素的位置的代码

    用Javascript 获取页面元素的位置的代码

    下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的绝对大小和相对大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的绝对大小.通常情况下,网页的绝对大小由内容和CSS样式表决定. 网页的相对大小则是指在浏览器窗口中看到的那部分网页,也就是浏览器窗口的大小,又叫做viewport(视口). 下图中央的方框就代表浏览器窗口,每次只能显示一部分网页. (图一 网页的绝对大小和相对大小) 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的

  • 获取dom元素那些讨厌的位置封装代码

    介绍 解决各个浏览器下 获取dom 元素的 位置 兼容性 ie 6 7 8 firefox 3.6 chrome 4.0 目前只测试了这几个浏览器 作者 Jelle · lu QQ:271412542 Email:idche@qq.com blogs:http://www.cnblogs.com/idche/ 源码说明 jquery 源码给我很大帮助,也用到一个叫 布鲁斯 · 李 的同学的源码,当然更多资源来源于网络. 功能说明 // jelle(elem) 对象 elem传递对象ID 或者 d

  • JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置

    JavaScript实现手机号码 3-4-4格式 手机号实现3-4-4格式相对来说还是比较简单的,监听input事件,实时的获取手机号码,然后根据手机号码的长度做截取和拼接的操作,即可实现手机格式的处理,实现格式的处理之后,我们还需要支持在指定光标进行新增和删除操作的时候光标不移动到最后面,因为手机号的格式使我们重置的,监听input事件重新赋值之后光标会移动到最后一位,解决这个问题的办法就是记录光标的位置并在value值格式重置之后重新设置光标的位置,好了,思路就是这样的,话不多说,直接上代码

  • iOS获取到用户当前位置

    通过CoreLocation定位,获取到用户当前位置,跟地图中的定位不同. 一.导入CoreLocation.framework 二.#import <CoreLocation/CoreLocation.h> 三.声明代理 <CLLocationManagerDelegate> 四.代码实现 1.声明 CLLocationManager *locationManager;//定义Manager // 判断定位操作是否被允许 if([CLLocationManager locatio

  • js getBoundingClientRect() 来获取页面元素的位置

    js getBoundingClientRect() 来获取页面元素的位置

    document.documentElement.getBoundingClientRect 下面这是MSDN的解释: Syntax oRect = object.getBoundingClientRect() Return Value Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordina

  • Javascript在IE或Firefox下获取鼠标位置的代码

    第一段代码是利用全局变量来获取实时鼠标的位置. 复制代码 代码如下: var xPos; var yPos; window.document.onmousemove(function(evt){ evt=evt || window.event; if(evt.pageX){ xPos=evt.pageX; yPos=evt.pageY; } else { xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft; yPo

  • Javascript实现获取及设置光标位置的方法

    本文实例讲述了Javascript实现获取及设置光标位置的方法.分享给大家供大家参考.具体如下: 在项目开发中经常遇到input等设置光标位置到最后的问题,今天我查了一下Google,找到了在IE.Firefox.Opera等主流浏览器的获取光标位置(getCursortPosition)以及设置光标位置(setCursorPosition)的函数. 1. 获取光标位置函数: function getCursortPosition (ctrl) { var CaretPos = 0; // IE

随机推荐