文本选中区域光标: 页面中闪烁的光标其实就是特殊的宽度为 0 的选区. 简单理解就是选区的左右边界交叉形成了光标. 有了这个概念下面的内容就很好理解了.
非 IE 浏览器下的实现
这里需要用到 input 元素的两个属性.
selectionStart,selectionEnd 选区开始位置, 选区结束位置.
二者代表了选中区域的左右边界.
两个值默认都是 0, 所以当我们使用 input.focus() 方法时, 默认光标在文本的开头.(注意这里并不是说每次 focus 调用光标都出现在开头. 是因为 selectionStart 的和 selectionEnd 的值随着文本输入而改变, 因而光标的位置随之改变.)
文本选中
我们设置
- input.selectionStart = 0; // 选中区域左边界
- 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 下对于文本流的处理提供了更加强大的支持, 不过这里我只着重于这篇文章的主旨.
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.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 函数必然是一个非常不错的选择.
下面剩下的就是对函数的封装咯. getCursorKey() , setCursorKey() , getSelection(),setSelection().
来源: https://blog.csdn.net/itdragons/article/details/52186058