光标与光标位置_setselectionrange颜色

设置光标的颜色

输入框光标默认颜色和输入框文字颜色相同，高度随字体大小改变。
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; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13

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

input{
   
  caret-color:red;  
}
1
2
3
4

光标控制基础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 =
1
2
3
4
5
6
7
8
9