光标与光标位置

设置光标的颜色

输入框光标默认颜色和输入框文字颜色相同，高度随字体大小改变。
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

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

属性和方法	描述
dom.selectionStart	返回或设置dom中光标起始位置(下标从0开始)
dom.selectionEnd	返回或设置dom中光标结束位置(下标从0开始)
dom.selectionDirection	返回或设置选择方向(取值：forward,backward,none)。IE不支持
dom.setSelectionRange(x,y,dir)	选中dom中下标[x]到[y]之间的字符。dir可选参数： 取值：forward,backward,none, 分别表示"从前往后", “从后往前"和"选择方向未知或不重要”。

浏览器支持：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")