使用TextRange获取输入框中光标的位_javascript技巧

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

时间: 2024-09-15 16:40:50

使用TextRange获取输入框中光标的位_javascript技巧的相关文章

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

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

JavaScript中获取时间的函数集_javascript技巧

下面给大家介绍下js获取时间的函数集. $(function(){ var mydate = new Date(); var t=mydate.toLocaleString(); $("#time").text(t); $("#time").load("Untitled-1.html"); }); 获取JavaScript 的时间使用内置的Date函数完成 var mydate = new Date(); mydate.getYear(); //

js身份证判断方法支持15位和18位_javascript技巧

复制代码 代码如下: //HTML页面上要有一个id为identity_card的input输入框,一个id为ipmessage的身份证错误或正确时提示消息的地方 <script> //身份证验证 $(document).ready(function(){ $("#identity_card").change(function(){ var idcard =$(this).val(); checkDate(idcard ); }); }); //身份证 function c

模仿password输入框的实现代码_javascript技巧

实例如下: function hiddenPass(event) { var password0 = document.getElementById("password0"); var password1 = document.getElementById("password1"); if (event.keyCode == 13) { } var keycode; if (window.event) { // IE keycode = event.keyCode

基于Bootstrap重置输入框内容按钮插件_javascript技巧

当好在输入框中输入一些内容之后,如果想清除这些内容,可以直接点击输入框右侧的小圆叉按钮即可.  text  password  email  url  search  tel  number  datetime 使用方法 使用该重置input输入框内容插件要引入jQuery和Bootstrap文件以及jquery.bootstrap-pureClearButton.js文件. <link rel="stylesheet" href="https://maxcdn.boo

js简单实现表单中点击按钮动态增加输入框数量的方法_javascript技巧

本文实例讲述了js简单实现表单中点击按钮动态增加输入框数量的方法.分享给大家供大家参考.具体如下: 这里演示表单中点击按钮动态增加输入框数量的方法,默认是没有输入框,点击按钮之后,输入框会不断的增加,每点击一次,增加一个,觉得挺不错吧,希望对你有所帮助. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-button-add-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

火狐下input焦点无法重复获取问题的解决方法_javascript技巧

今天遇到了一个很棘手的问题,就是在做一些输入框的验证的时候,我这边项目的业务逻辑就是当我选中某个select的某个特定option的时候,需要显示出一个input输入框让用户输入东西,但是如果用户啥也不做,就必须弹出警告框让用户输入,等其输入后,我这边再将input隐藏掉. 因此,便产生了如下问题,input输入框显示的时候,需要自动获取焦点,此时,我是用的 复制代码 代码如下: document.getElementById('id').focus(); 恩,尝试了一下,效果很好,不禁心中大喜

js实现当前输入框高亮显示的方法_javascript技巧

本文实例讲述了js实现当前输入框高亮显示的方法.分享给大家供大家参考.具体如下: 这里演示利用JavaScript技术实现的当前输入框高亮显示代码,在很多的网页表单中,当用户鼠标点击文本框的时候,该文本框就会显示高亮状态,提醒用户输入,本例通过JAVAScript代码实现了这样一种效果. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-input-color-show-codes/ 具体代码如下: <!DOCTYPE html

JS实现方向键切换输入框焦点的方法_javascript技巧

本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu