[图解]在输入框和文本框中获取和设置光标位置，以及选中文本和获取选中文本值的方法 --- 详解，兼容所有浏览器。

[图解]在输入框和文本框中获取和设置光标位置，以及选中文本和获取选中文本值的方法 --- 详解，兼容所有浏览器。写在前面

最近在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; //选中区域右边界PR