使用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)

相关推荐

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

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

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

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

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

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

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

  • 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

  • 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

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

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

  • php获取字符串前几位的实例(substr返回字符串的子串用法)

    在实际项目应用中,经常遇到使用php获取字符串前几位用来比较.赋值等等.今天给大家分享使用php substr 获取字符串前几位.后几位.指定位的用法. substr (PHP 4, PHP 5) substr - 返回字符串的子串 说明 string substr ( string $string , int $start [, int $length ] ) 返回字符串 string 由 start 和 length 参数指定的子字符串. 参数 string 输入字符串. start 如果

  • 微信小程序使用form表单获取输入框数据的实例代码

    微信小程序使用form表单获取输入框数据的实例代码

    本文讲述了微信小程序使用form表单获取输入框数据的实例代码.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml 用户名: 密码: 登录 重置 {{tip}}{{userName}}{{psw}} index.js Page({ data:{ // text:"这是一个页面" tip:'', userName:'', psw:'' }, formBindsubmit:function(e){ if(e.detail.value.userName.leng

  • js与jquery中获取当前鼠标的x、y坐标位置的代码

    复制代码 代码如下: <div id="testDiv">放在我上面</div> <script type="text/javascript"> $('#testDiv').mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.l

  • js获取字符串最后一位方法汇总

    方法一:运用String对象下的charAt方法 charAt() 方法可返回指定位置的字符. 复制代码 代码如下: str.charAt(str.length – 1) 请注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串 方法二:运用String对象下的substr方法 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. 复制代码 代码如下: str.substr(str.length-1,1) 重要事项:

  • vue限制输入框只能输入8位整数和2位小数的代码

    看到这个标题好像很简单,onblur.onchange事件都能做到,但是用户体验感貌似很差.查了下百度查不到资料了.看了下vue的基础,发现 vue 有个 watch 监听器好吧,从这里入手 用v-model 加watch 就可以很简单的实现这一个功能. ----代码省略 <input id="amt" type="number" v-model="amount"/> ----代码省略 data:{ return{ amount:&q

  • js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标

    js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标

    引言 前段时间发了一个编辑器的插件,忙完后自己再次进行了详细的测试,然后心里冒出一句:"这谁写的这么奇葩的插件?完全没什么luan用啊!" 自己做了让自己不满意的事,咋整?男人不怕累,花了时间重写(为世界上所有像我一样勤劳的男人点赞)~ 思维导图 在小生看来,在开发每一个新功能的时候都应该做到心中有一张思维导图:功能实现逻辑和实现功能大致的方法.当然我们不可能在还没动手 前就考虑得面面俱到,但在正式开发之前心里对整个流程有个清晰的印象肯定会让我们在动手时愈加流畅(喝口娃哈哈美滋滋,看图

随机推荐