使用TextRange获取输入框中光标的位置-阿里云开发者社区

开发者社区> 唐玄奘> 正文

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

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

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

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

None.gif
</script>


    要彻底的弄清楚TextRange的具体用法,需要了解与其相关的一些内容,请参考MSDN

    这里说一下使用这个GetCursorPsn()方法后,会给输入框操作带来的副作用。对于输入框<input type="text" onkeydown="GetCursorPsn(this)">,它将不能再使用Shift+左右这两个方向键来选择文本;对于<textarea onkeydown="GetCursorPsn(this)"></textarea>,将不能再使用Shift+上下左右四个方向键来选择文本。因为代码在获取了当前光标到文本的startPoint后,调用rng.collapse(false);会改变文本筐内文本的EditPoint。不过这个副作用基本不会给我们使用文本框带来什么大的问题,所以基本不用太在意。 


本文转自博客园鸟食轩的博客,原文链接:http://www.cnblogs.com/birdshome/,如需转载请自行联系原博主。 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Keras进行深度学习:(三)使用text-CNN处理自然语言(上)
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习、深度学习的知识! 上一篇文章中一直围绕着CNN处理图像数据进行讲解,而CNN除了处理图像数据之外,还适用于文本分类。
1404 0
如何让接口文档自动生成,SpringBoot中Swagger的使用
在开发过程中,java后端需要与客户端进行交互,需要将后端的接口及参数写成文档给调用者查阅。一个问题也有此而生,需求改动频繁,接口设计也会随之改动,文档修改的不及时会带来很大的问题。 Swagger是一个自动生成文档的工具,可以在线查阅文档,减少了开发人员的负担,下面我们就来看看如何在SpringBoot中使用Swagger。
938 0
《ExtJS 3详解与实践》阅读补充资料:Ext.extend()中使用super关键字
  既然一门语言被精简了,无论idea还是直观的语法,都务求精简的话,那么这便无形就是一个趋势,趋势往往不为人们的意志转移地转为自己的习惯,思维定性的习惯,连function这个关键字也有某仁兄觉得太长了,有缩减的必要。
723 0
JSP---JSP中4个容器-pageContext使用
这里重点只讲pageContext容器的用法哦。 因为另外的3个容器(request,session,application)在前面的servlet中已经演示过很多遍了 容器 作用域 pageContex 仅仅是当前页面,无法传参 request 当前页面,可以传参 session 同一个JSESSIONID共用一个 application 只要服务器还没重新启动,就一直存在 详细介绍: pageContext – 它的作用范围仅为当前JSP页面。
722 0
使用SPELLCHECK属性禁用输入框拼写检查
我们经常会遇到一些可编辑文本内容中显示红色下划波浪线,类似于word文档中错误单词的拼写检查,使得该标签内容很不美观。那么如何关闭textarea等可编辑文本字段的拼写检查呢?这里,我们可以通过一个Html5全局属性spellcheck来解决禁用拼写检查的功能。
1379 0
让keras训练深度网络时使用多个显卡
1、使用nvidia-smi pmon 查看linux系统的gpu情况,如下: 显然是2张显卡,如何让它们都工作呢 2、keras提供了keras.utils import multi_gpu_model使用多个显卡的功能: 在原来的model基础上使用multi_gpu_model函数指定一...
1909 0
+关注
641
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载