1 //==================== 自绘光标开始 =======================
  2 // 自绘光标说明：
  3 // 以下语句请放到body末尾，确保html元素加载完后执行。
  4 // 测试中光标颜色为红色，请把下面的red改为black。
  5 // 搜索框中，font-size需指定，单位px。空则默认为12px。
  6 // 搜索框需要限定字符数，若字符数超过宽度且显示不全时，则光标位置不准确。
  7 // 搜索框需要添加几个事件用来自绘光标。用法示例如下：
  8 /*
  9 <input id="textWithCaret" type="text" value="" 
 10 onfocus="isCaretBlink=true;" onblur="isCaretBlink=false;" 
 11 onpropertychange="caretMove(this);" onkeyup="caretMove(this);" onclick="caretMove(this);" 
 12 style="font-size:32px;"/>
 13 */
 14 
 15 // 添加光标元素
 16 var divCaret = document.createElement('div');
 17 divCaret.id = 'divCaret';
 18 divCaret.style.zIndex = 100;
 19 divCaret.style.position = 'absolute';
 20 divCaret.style.left = '0px';
 21 divCaret.style.top = '0px';
 22 divCaret.style.width = '2px';
 23 divCaret.style.height = '2px';
 24 document.body.appendChild(divCaret);
 25 // 光标闪烁
 26 var isCaretBlink = false;
 27 function caretBlink(){
 28   if(""==$id("divCaret").style.backgroundColor ){
 29     if(isCaretBlink){
 30       $id("divCaret").style.backgroundColor = "red";
 31     }
 32   }
 33   else{
 34     $id("divCaret").style.backgroundColor = "";
 35   }
 36   setTimeout("caretBlink()", 500);
 37 }
 38 caretBlink();
 39 
 40 /*
 41 // 遍历文本框 ***js中附加触发事件无效，放弃该方法。删除即可***
 42 // setAttribute方法在IE下有效。addEventListener方法在chrome下有效。
 43 // setAttribute方法在webkitdotnet下会覆盖掉之前设置的触发事件，新设置的事件不会被触发。其他方法无效。
 44 var textInputs = document.getElementsByTagName("input");
 45 for(var i=0; i<textInputs.length; ++i){
 46   if("text"==textInputs[i].type){
 47     // 焦点事件，显示或隐藏光标
 48     //textInputs[i].attachEvent("click", function(){ alert("click"); } );
 49     //textInputs[i].addEventListener("click", function(){ alert("click"); } );
 50     textInputs[i].setAttribute("onfocus", function(){ isCaretBlink = true; });
 51     textInputs[i].setAttribute("onblur", function(){ isCaretBlink = false; });
 52     // 字符数改变，移动光标
 53     textInputs[i].setAttribute("onpropertychange", function(obj){
 54       return function(){
 55         caretMove(obj);
 56       }
 57     }(textInputs[i]));
 58     // 鼠标按下或键盘弹起，光标也可能改变
 59     textInputs[i].setAttribute("onmousedown", function(obj){
 60       return function(){
 61         caretMove(obj);
 62       }
 63     }(textInputs[i]));
 64     textInputs[i].setAttribute("onkeyup", function(obj){
 65       return function(){
 66         caretMove(obj);
 67       }
 68     }(textInputs[i]));
 69   }
 70 }
 71 */
 72 
 73 // 移动光标
 74 function caretMove(obj){
 75   isCaretBlink=true;
 76   // 光标的初始位置
 77   var caretPosition = getCaretPosition(obj);
 78   var caretIndex = getCaretIndex(obj);
 79   $id("divCaret").style.left = (caretPosition.X + (caretIndex * parseInt(caretPosition.F) / 2)) + "px";
 80   $id("divCaret").style.top = caretPosition.Y + "px";
 81   $id("divCaret").style.height = caretPosition.H + "px";
 82 }
 83 // 获取文本框光标位置等信息
 84 function getCaretPosition(e){
 85   var caretPosition = {"X":e.offsetLeft, "Y":e.offsetTop, "W":(e.offsetWidth-4), "H":(e.offsetHeight-4), "F":e.style.fontSize || "12px"};
 86   while(e=e.offsetParent){
 87     caretPosition.X += e.offsetLeft;
 88     caretPosition.Y += e.offsetTop;
 89   }
 90   caretPosition.X += 2;
 91   caretPosition.Y += 2;
 92   return caretPosition;
 93 }
 94 // 获取光标索引位置
 95 function getCaretIndex(e){
 96   var caretIndex = 0;
 97   // IE Support
 98   if (document.selection) { 
 99     // Set focus on the element
100     e.focus ();
101     // To get cursor position, get empty selection range
102     var caretSel = document.selection.createRange ();
103     // Move selection start to 0 position
104     caretSel.moveStart ('character', -e.value.length);
105     // The caret position is selection length
106     caretIndex = caretSel.text.replace(/[^\x00-\xff]/ig, "xx").length;
107   }
108   // Firefox support & webkit
109   else if (e.selectionStart || e.selectionStart == '0'){
110     // 双字节字符转换为2个字符
111     caretIndex = e.value.substr(0, e.selectionStart).replace(/[^\x00-\xff]/ig, "xx").length;
112   }
113   return caretIndex;
114 }
115 // 获取元素
116 function $id(id) { return document.getElementById(id); }
117 //==================== 自绘光标结束 =======================