首页 > 建站教程 > JS、jQ、TS >  JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容selectionStart、selectionEnd、cr正文

JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容selectionStart、selectionEnd、cr

先看下效果：



基本的认识：
    文本选中区域光标：页面中闪烁的光标其实就是特殊的宽度为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; //选中区域右边界
获取选中的文本内容
    因为已经知道了selectionStart和selectionEnd,所以用字符串的substring方法 
var selection = input.value.substring(input.selectionStart,input.selectionEnd);
光标位置

    设置光标位置 
//把光标放到第5个字符的后面
input.selectionStart = 5;//选中区域左边界
input.selectionEnd = 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().

    最后放出DEMO：JS获取文本框焦点光标位置、选中起始位置、终止位置、选择内容DEMO
TAGS: selectionStart