光标与光标位置

设置光标的颜色

输入框光标默认颜色和输入框文字颜色相同，高度随字体大小改变。
1.利用文字镂空模拟实现

input,textarea { 
  color: red;    /* 光标的颜色随文本颜色*/ 
  -webkit-text-fill-color: transparent;  /*让文本颜色透明*/
  text-shadow: 0px 0px 0px #333;  /* 通过文字阴影显示文本 */ 
} 
/*在此情况下改变 placeholder 颜色*/
input::-webkit-input-placeholder{
  color: #aaa;  
  text-shadow: none;
  -webkit-text-fill-color: initial; 
}

2.使用 CSS3 新增 caret-color 属性来定义插入光标的颜色。.
浏览器支持：

input{
  caret-color:red;  
}

光标控制基础API

获取焦点的输入框元素具有下面属性和方法：

浏览器支持：IE9+及其他主流浏览器都支持。

dom.setSelectionRange(x,y,dir) 方法中，第三个参数 dir 即 selectionDirection。目前浏览器对它的支持度较差，本人用chrome,IE测试均无效。
注意，只有部分表单元素具有上面的属性，例如，chorme浏览器中，type=“number” 的 input 元素就没有上面相关属性，使用时会报错。

下面示例中的方法可放心使用(IE9+及主流浏览器都支持)

<textarea rows="5" cols="20" id="txt">ABCDEFGHI</textarea>
<button id="btn1">选中'CDE'</button>
<button id="btn2">获取光标位置</button>
<button id="btn3">设置光标位置</button>

<script>
  var txt = document.getElementById("txt");
  var btn1 = document.getElementById("btn1");
  var btn2 = document.getElementById("btn2");
  var btn3 = document.getElementById("btn3");
  
  //属性的默认值
  console.log(txt.selectionStart);     //0  
  console.log(txt.selectionEnd);       //0  
  
  //设置选中状态
  btn1.onclick = function(){
    txt.focus();
    txt.setSelectionRange(2,5);        // 选择部分
    // input.setSelectionRange(0, -1); // 全选
    var start = txt.selectionStart;    //此时值为2
    var end = txt.selectionEnd;        //此时值为
    var str = txt.value.substring(start,end);
    console.log(str);                  //CDE
  }
  
  //获取光标位置
  btn2.onclick = function(){
    //未选中文本时，下面两个值是一样的
    console.log(txt.selectionStart);     
    console.log(txt.selectionEnd);	
  }
  
  //设置光标位置
  btn3.onclick = function(){
    txt.focus();
    txt.selectionStart = 2;    
    txt.selectionEnd = 2;    
  }
</script>

<textarea cols="30" rows="10" id="box">123456789</textarea>

<script>
var d=document.getElementsByTagName("textarea")[0];
d.onfocus=function(){
  d.selectionStart=2;        //当 d 获取焦点时，光标位于文本2和3之间
}
d.onfocus=function(){
  d.selectionEnd=5;          //当 d 获取焦点时，选中"12345"
}
d.onfocus=function(){
  d.selectionStart=2;
  d.selectionEnd=5;          //当 d 获取焦点时，选中"345"
}
d.onfocus=function(){
  d.setSelectionRange(2,5)   //当 d 获取焦点时，选中"345"
}
</script>

range 对象
IE浏览器中支持 document.selection 对象，可利用该对象的 createRange() 方法返回一个Rane 对象 (注：与 document.createRange 方法创建的 Rane 对象不要搞混淆) 来处理低版本IE浏览器中与光标相关的操作。

//创建一个文本选区对象
var range = document.selection.createRange();
//第二个参数，正数表示右移，负数表示左移
range.moveStart("character",2);   //起始边界右移两个字符 (起始边界默认0)
range.moveEnd("character",10);    //结束边界右移两个字符 (结束边界默认文本长度)

range.select();                   //将range包含的区域选中
range.text;                       //返回选中的文本

//压缩边界
range.collapse();         //相当于让结束边界等于开始边界
range.collapse(false);    //相当于让开始边界等于结束边界

封装方法

1.获取光标位置

function getCP (el) {
  el.focus ();       
  if (document.selection) {   //低版本IE
    var range = document.selection.createRange();
    range .moveStart ('character', -el.value.length);
    return range.text.length;
  }else if (el.selectionStart != null ){  //有些input类型不支持，过滤
    return el.selectionStart;
  }
}

2.设置光标位置，第二个参数是数子下标，若为 'last' 则移动光标到结尾。

/*
* el    输入框元素
* pos   位置下标，若为'last'则移动到末尾
*/
function setCP(el, pos){
  el.focus(); 
  if(pos == 'last'){
  	pos = el.value.length
  }
  if(el.setSelectionRange) {
    el.selectionStart = el.selectionEnd = pos;   
  }else if (el.createTextRange) { //IE低版本浏览器
    var range = el.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}

3.获取选中的文本，可以获取页面任何元素中被鼠标选中的内容，不仅仅是输入框。

function getSelectText() {
  if (document.selection) { //低版本IE
    return document.selection.createRange().text;
  }else{
  	return window.getSelection().toString();
  	//return el.value.substring(el.selectionStart,el.selectionEnd);
  }
}

4.选中特定范围的文本。

/*
* el    输入框元素
* start 起始下标
* end   结束下标
*/
function setSelectText(el, start, end) {
  var a = parseInt(start);
  var b = parseInt(end);
  if(start>end){ 
  	start = b;
  	end = a;
  }else{
  	start = a;
  	end = b;
  }
  if(el.createTextRange){  //低版本IE
    var range = el.createTextRange();
    range.collapse(true);
    range.moveStart("character", start);
    range.moveEnd("character",end-start);
    range.select();
  }else{
    el.setSelectionRange(start, end);
  }
  el.focus();  
}

5.在光标后插入文本。

/*
* el    输入框元素
* value 插入的文本
*/
function insertText(el, value) {
  var len = (''+value).length;
  el.focus();
  if (document.selection) {  //IE低版本
    var range = document.selection.createRange();
    range.text = value;
  }else if (el.selectionStart != null ) {
    var start = el.selectionStart;
    var end = el.selectionEnd;
    var scrollTop = el.scrollTop;
    el.value = el.value.substring(0, start) 
               + value + 
               el.value.substring(end, el.value.length);
    el.selectionStart = el.selectionEnd = start + len;
    el.scrollTop = scrollTop;
  }else {
    el.value += value;
  }
}