Home  >  Article  >  Web Front-end  >  使用TextRange获取输入框中光标的位_javascript技巧

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

WBOY
WBOYOriginal
2016-05-16 19:25:211098browse

TextRange是用来表现HTML元素中文字的对象,虽然我们平时不太常用这个对象,可是它却在IE4.0中就已提供了。不过TextRange提供的调用方法却都比较晦涩,那么我们能拿它做些什么呢? 

    TextRange的传统用途是对用户在Web页上用鼠标圈选的文字内容的操作,比如变化、删除、新增等。但其经典的用途却是,在Web页面中查找文字(这个比较简单)和获取输入框光标的位置。其中后者又有可以衍生出很多更有用的用途,比如:限制输入的MaskTextBox,其核心技术点就是获取输入框的光标位置,然后使用正则表达式判断输入内容。还有我后面会介绍的"使用方向键在输入框矩阵中自然的导航",核心技术点也是获取输入框中的光标位置。 

    获取输入框中的光标位置的整个代码其实很短,只是这些对象和方法不太常用而已。 
<script> <BR>function GetCursorPsn(txb) <BR>{ <BR> var slct = document.selection; <BR> var rng = slct.createRange(); <BR> txb.select(); <BR> rng.setEndPoint("StartToStart", slct.createRange()); <BR> var psn = rng.text.length; <BR> rng.collapse(false); <BR> rng.select(); <BR> return psn; <BR>} <BR></script> 

    要彻底的弄清楚TextRange的具体用法,需要了解与其相关的一些内容,请参考MSDN
    这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。对于输入框,它将不能再使用Shift+左右这两个方向键来选择文本;对于,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题,所以基本不用太在意。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn