基本的认识:
文本选中区域光标:页面中闪烁的光标其实就是特殊的宽度为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; //选中区域左