[图解]在输入框和文本框中获取和设置光标位置,以及选中文本和获取选中文本值的方法 --- 详解,兼容所有浏览器。...
为什么80%的码农都做不了架构师?>>>
写在前面
最近在segmentfault上看到它的日期输入控件,感觉挺有意思。好吧,动手写一个,加到自己的代码库里吧。
然后问题来了,在上面图片中,我们很明显的看得出这里涉及光标位置的控制。比如说当我输入1993的3之后,光标必须要得插入到-中划线的下个输入点。
在网上找了找获取和设置光标位置的方法,发现是资料是相当的破碎,并没有一个详细的介绍。 所以我来一个详细的。 好了,不要啰嗦。
基本的认识
文本选中区域
光标 页面中闪烁的光标其实就是特殊的宽度为0的选区。 简单理解就是选区的左右边界交叉形成了光标。 有了这个概念下面的内容就很好理解了。
非IE浏览器下的实现
这里需要用到input元素的两个属性。
selectionStart、selectionEnd 选区开始位置,选区结束位置。
二者代表了选中区域的左右边界。
两个值默认都是0,所以当我们使用input.focus()方法时,默认光标在文本的开头。(注意这里并不是说每次focus调用光标都出现在开头。是因为selectionStart的和selectionEnd的值随着文本输入而改变,因而光标的位置随之改变。)
文本选中
我们设置
1 input.selectionStart = 0; //选中区域左边界 2 input.selectionEnd = input.value.length; //选中区域右边界
上面的代码可以选中输入框的全部内容。 等同于input.select();
input.selectionStart = 1; //选中区域左边界 input.selectionEnd = 4; //选中区域右边界
上面的代码选中了234三个字符。
我们如何获取选中的文本内容呢? 因为已经知道了selectionStart和selectionEnd,所以用字符串的substring方法
var selection = input.value.substring(input.selectionStart,input.selectionEnd);
光标位置
设置光标
input.selectionStart = 5; //选中区域左边界 input.selectionEnd = 5; //选中区域右边界
上面的代码把光标放到5的后面。
获取光标位置
直接使用selectionStart和selectionEnd中的任意一个值即光标的位置。
IE浏览器下的实现
IE下对于文本流的处理提供了更加强大的支持,不过这里我只着重于这篇文章的主旨。
用到的方法和属性先汇总到下面。
createTextRange()、 document.selection.createRange()
moveStart() 、moveEnd() 、move() 、collapse() 、text 、select() ----------------- ---- - - - 下面是详细的介绍 -----------------------
var range = input.createTextRange(); //创建一个文本选区对象。
这个选区对象默认包含了input的全部文本内容。需要注意的是,这个选区对象是一个抽象的区域。,在调用range.select()方法之前,选区对象的内容并不会被添加选中效果。
range.select(); //将选区对象包含的内容选中。
我们可以用 range.text属性得到选区包含的文字
选区有两个类似于其他浏览器中selectionStart和selectionEnd属性的方法, moveStart和moveEnd。
上面我们说过,默认这个选区对象包含input的全部文本内容,所以它的左右边界分别就是文本的开头和结尾位置。
moveStart方法用来移动左边界。 像这样调用
range.moveStart("character",2); //左边界右移两个字符 。 character--字符 range.select(); //将range包含的区域选中。
结果
moveStart和moveEnd都要传入两个参数,第一个参数可选值有 character、word、sentence、textedit. 这里我们只用到character,即根据字符来偏移。 第二个参数代表偏移的多少,正负表示方向。
我们知道左边界最初默认是0,右边界默认是文本内容长度值。
我们注意到每次选中range包含区域文本的操作都需要调用range.select()方法,通过select方法来把range对象包含的内容区域选中。这与上面的其他浏览器的实现方式貌似有了大的差异,相比之下似乎并没有那么方便。但是创建一个包含抽象文字区域的选区对象其实提供了更大的灵活性。 我们甚至于可以创建多个选区对象。
还有一个很有用的方法 collapse, 见名知意,就是将选区对象的范围压缩,下面详细介绍。
collapse可以传入一个布尔值作为参数,参数默认值为true,指示向左还是向右压缩。
var range = input.createTextRange(); //创建选区对象 //此时选区对象的左边界为0,右边界为input.value.length; range.collapse(); //此时选区对象左边界为0,右边界为0; 相当于将选区向左收缩了,即使右边界下标等于左边界下标。 range.select(); //左右边界重合,可以显示光标。
效果如图: collapse(true)相当于让右边界下标等于左边界下标。
再试看看collapse(false)
var range = input.createTextRange(); //创建选区对象 //此时选区对象的左边界为0,右边界为input.value.length; range.collapse(false); //此时选区对象左边界为input.value.length,右边界为input.value.length; 相当于将选区向右收缩了,即使左边界下标等于右边界下标。 //左右边界重合,可以显示光标。 range.select();
效果如图 可以看到,我们使用collapse(false)结合select方法可以很方便的把光标focus到文本框的末尾。
还有一个move方法
var range = input.createTextRange(); range.moveStart("character",2); range.select(); //图一range.move("character",3); //等价于 range.collpase(true); range.moveStart("character",3);range.moveEnd("character",3); 三步。合一 range.select(); //图二
这个方法和moveStart有一样的参数,不过有点难以理解。 上面的代码相当于------先将选区向左收缩,这时候就相当于一个光标咯,然后将光标右移三个字符。
上面的代码的两个图, 图一 图二
当我们要移动光标时,move函数必然是一个非常不错的选择。
document.selection.createRange()
这个方法根据当前页面中的选中文字区域来创建一个选区对象,这个选区对象与createTextRange方法的到选区对象的区别在于,它的选区范围为页面选中文字的区域,即它的左右边界不再是默认的左最小右最大。
通过这个方法我们可以轻松获取光标在输入框中的位置。 首先你得理解咯光标和选区的关系。
var range = document.selection.createRange(); //根据页面中选中区域创建选区对象。 光标也是特殊的选区 range.moveStart("character",-elem.value.length); //移动左边界到0 var cursorIndex = range.text.length; //选区对象包含文本长度即光标位置
兼容封装
下面剩下的就是对函数的封装咯。 getCursorKey() , setCursorKey() , getSelection(),setSelection().
function getCursor(elem) {//IE 9 ,10,其他浏览器if (elem.selectionStart !== undefined) {return elem.selectionStart;} else { //IE 6,7,8var range = document.selection.createRange();range.moveStart("character", -elem.value.length);var len = range.text.length;return len;}}function setCursor(elem, index) {//IE 9 ,10,其他浏览器if (elem.selectionStart !== undefined) {elem.selectionStart = index;elem.selectionEnd = index;} else { //IE 6,7,8var range = elem.createTextRange();range.moveStart("character", -elem.value.length); //左边界移动到起点range.move("character", index); //光标放到index位置range.select();}}function getSelection(elem) {//IE 9 ,10,其他浏览器if (elem.selectionStart !== undefined) {return elem.value.substring(elem.selectionStart, elem.selectionEnd);} else { //IE 6,7,8var range = document.selection.createRange();return range.text;}}function setSelection(elem, leftIndex, rightIndex) {if (elem.selectionStart !== undefined) { //IE 9 ,10,其他浏览器elem.selectionStart = leftIndex;elem.selectionEnd = rightIndex;} else { //IE 6,7,8var range = elem.createTextRange();range.move("character", -elem.value.length); //光标移到0位置。//这里一定是先moveEnd再moveStart//因为如果设置了左边界大于了右边界,那么浏览器会自动让右边界等于左边界。range.moveEnd("character", rightIndex);range.moveStart("character", leftIndex);range.select();}}
结束
转载于:https://my.oschina.net/mdu/blog/1800151
[图解]在输入框和文本框中获取和设置光标位置,以及选中文本和获取选中文本值的方法 --- 详解,兼容所有浏览器。...相关推荐
- vue 子级拿值_vue 父组件通过$refs获取子组件的值和方法详解
前言 在vue项目中组件之间的通讯是很常见的问题,同时也是很重要的问题,我们大致可以将其分为三种情况: 父传子:在父组件中绑定值,在子组件中用props接收 子传父:在父组件中监听一个事件,在子组件中 ...
- 【文件md5值查看方法详解】:如何获取文件的唯一标识?
[文件md5值查看方法详解]:如何获取文件的唯一标识? 在日常工作中,我们经常需要检查文件是否被篡改或者验证文件的完整性.而文件的MD5值就是一个很好的选择,因为它可以作为文件的唯一标识.那么,如何获 ...
- html中的空格符号( nbsp; ensp; emsp; )介绍以及中文对齐实现的方法详解
一:不同空格符合的区别 半角的不断行的空白格(推荐使用) 半角的空格 全角的空格 详细的含义: :这是我们使用最多的空格,也就是按下space键产生的空格.在HTML中,如果你用空格键产 ...
- 第五人格服务器维修中怎么进,第五人格进不去怎么办 游戏进不去解决方法详解[多图]...
第五人格开启测试已经有一段时间,许多玩家都会遇到各种问题,其中游戏进不去是让玩家最头痛的,今天安族小编来给大家介绍一下游戏进不去解决方法详解. 第五人格进不去解决方法 大家在玩的时候,肯定都会遇到卡顿 ...
- jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
这篇文章主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuer ...
- Javascript实现获取及设置光标位置的方法
2019独角兽企业重金招聘Python工程师标准>>> 获取光标位置函数: function getCursortPosition (ctrl) {var CaretPos = 0; ...
- 绝地求生刺激战场服务器维护中怎么办,绝地求生刺激战场更新后进不去怎么办 游戏更新失败解决方法详解...
类型:动作射击大小:669.2M语言:中文 评分:4.1 标签: 立即下载 绝地求生刺激战场更新后进不去怎么办?游戏更新失败解决方法有哪些?详解哪里找?绝地求生刺激战场在4月3日进行了一次大版本的更新 ...
- php在文本框中输入一个年份_判断其生肖_并输出在文本框旁边.代码,PHP开发工程师面试真题之Web网页设计(附参考答案)_PHP教程...
一.Form表单 真题1:简述POST和GET传输的最大容量分别是多少? 参考答案: GET方法传递数据,控制在1MB之内(因为URL的长度限制在1MB字符以内):POST方法传输数据没有大小的限制. ...
- python中的浮点数用法_如何利用Python在运算后得到浮点数值的方法详解
在python中进行两个整数相除的时候,在默认情况下都是只能够得到整数的值,而在需要进行对除所得的结果进行精确地求值时,想在运算后即得到浮点值,那么如何进行处理呢? 1.修改被除数的值为带小数点的形式 ...
最新文章
- Scala变量和常用数据类型
- html5 image 同步,html5 image使用大全
- 跨域问题解决(我只是搬运工)
- DEEPNOVA 技术荟系列公开课回顾:释放海量数据价值,尽显数据智能之美
- webgis之相关工具
- 命令行下对apk签名
- 【大数据部落】R语言基于决策树的银行信贷风险预警模型
- java浮点数转整数_(题目2)自己实现浮点数转换为整数
- 软件测试需求分析方法有哪些,一起来看看吧
- 极其简单的笔记本安装win10 + ubuntu20.0.4双系统教程
- python网络爬虫网易云音乐_一篇文章带你用Python网络爬虫实现网易云音乐歌词抓取...
- 灭火器摆放识别检测算法 yolo
- 成功的路上会布满荆棘
- MyJzvdStd+JZMediaExo
- python期末考试试卷及答案_python期末考试复习试卷
- 如何快速入门Ctex
- Django中的url路由机制------学习mooc中《Python云端系统开发入门》
- 回首电视剧《平凡的世界》【2006-06-20】
- 《袁老师访谈录》第十四期|李世玮教授/香港科大(广州)系统枢纽署理院长【问诊未来·院长系列:开辟融合创新科技转化新航路】...
- 一阶低通滤波器和二阶低通滤波器