输入框input或内容区域textarea中关于光标移动问题

yangrd 发布于2019-08-02 16:05 / 2912人阅读

摘要：作者心叶时间什么是光标页面上输入框中闪烁的光标其实是一个选区，也就是选区的左边界和右边界直接形成的选区。非浏览器输入框结点有二个属性，分别代表选区开始位置，选区结束位置。和参数一样，对于移动光标比较友好。

作者：心叶
时间：2018-09-13 12:28

什么是光标

页面上输入框中闪烁的光标其实是一个选区，也就是选区的左边界和右边界直接形成的选区。

非IE浏览器

输入框结点input=document.getElementById("#input")有二个属性： selectionStart、selectionEnd，分别代表选区开始位置，选区结束位置。

通过修改这二个值就可以形成选区，宽度为0也就实现了光标的位置控制和获取。

IE浏览器

IE浏览器提供的API更加丰富：
createTextRange()、 document.selection.createRange()、moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()。

第一步：

var range = input.createTextRange();        //创建一个文本选区对象。

第二步：一些操作

range.collapse(boolean);

可以传入一个布尔值作为参数,参数默认值为true，指示向左还是向右压缩

range.moveStart(param1,param2);

第一个参数可选值有 character、word、sentence、textedit. 比如character，即根据字符来偏移。第二个参数代表偏移的多少，正负表示方向。

range.moveEnd(param1,param2);

和上面那个方法参数一样，不同的是这是用来移动结束边界

第三步：

range.select();  //将range包含的区域选中。

需要注意的是：在调用range.select()方法之前，选区对象的内容并不会被添加选中效果

补充：

var range = document.selection.createRange();

这个方法根据当前页面中的选中文字区域来创建一个选区对象，这个选区对象与createTextRange方法的到选区对象的区别在于，它的选区范围为页面选中文字的区域，即它的左右边界不再是默认的左最小右最大。

range.move(param1,param2);

和moveStart参数一样，对于移动光标比较友好。

云服务器 GPU云服务器 js正则input输入框输入框内容清空 input光标 php中关于的运算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54636.html

手机端页面在项目中遇到的一些问题及解决办法（持续更新）

摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...

teren 2019-08-29 15:36 评论0 收藏0
手机端页面在项目中遇到的一些问题及解决办法（持续更新）

摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...

wyk1184 2019-08-26 11:59 评论0 收藏0
手机端页面在项目中遇到的一些问题及解决办法（持续更新）

摘要：解决页面使用在上滑动卡顿的问题首先你可能会给页面的和增加了然后就可能造成上页面滑动的卡顿问题。页面橡皮弹回效果遮挡页面选项卡有时和的去除掉问题可能就没有了。该行无文字时，光标高度与的一致。 1.解决页面使用overflow: scroll在iOS上滑动卡顿的问题? 首先你可能会给页面的html和body增加了height: 100%, 然后就可能造成IOS上页面滑动的卡顿问题。解决方案...

Cristic 2019-08-02 10:38 评论0 收藏0
用Canvas实现文本编辑器（支持艺术字渲染与动画）

摘要：项目中文字由进行渲染。待触发时，取消中文输入标记，将文字渲染到上。而其中一些有趣的细节实现如文本渲染，对中文笔画分割实现有趣的动画等并没有描写。导言目前富文本编辑器的实现主要有两种技术方案：一个是利用contenteditable属性直接对html元素进行编辑，如draft.js；另一种是代理textarea + 自定义div + 模拟光标实现。对于类似word的经典富文本编辑器，...

OldPanda 2019-08-20 15:21 评论0 收藏0