0 条评论

写在前面

最近在segmentfault上看到它的日期输入控件，感觉挺有意思。好吧，动手写一个，加到自己的代码库里吧。

然后问题来了，在上面图片中，我们很明显的看得出这里涉及光标位置的控制。比如说当我输入1993的3之后，光标必须要得插入到-中划线的下个输入点。

在网上找了找获取和设置光标位置的方法，发现是资料是相当的破碎，并没有一个详细的介绍。 所以我来一个详细的。  好了，不要啰嗦。

基本的认识

文本选中区域  

光标    页面中闪烁的光标其实就是特殊的宽度为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下对于文本流的处理提供了更加强大的支持，不过这里我只着重于这篇文章的主旨。

 用到的方法和属性先汇总到下面。   

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,8
             var 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,8
             var 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,8
             var 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,8
             var range = elem.createTextRange();
             range.move("character", -elem.value.length); //光标移到0位置。
             //这里一定是先moveEnd再moveStart
             //因为如果设置了左边界大于了右边界，那么浏览器会自动让右边界等于左边界。
             range.moveEnd("character", rightIndex);
             range.moveStart("character", leftIndex);
             range.select();
         }
     }

 结束

下一章就写文章开头的那个日期控件咯。

我也是最近才开始写博客，希望大家多点推荐，多多交流。