文本框（input或textarea）的光标无法修改样式（除了通过color修改光标颜色）。但笔者希望个人创建自己的网站时，文本框的光标有属于自己的风格。所以，尝试模拟文本框的光标，设计有自己风格的光标。以下是笔者个人关于通过js获取文本框光标位置及定位到文本框的想法。
【************************基本思路***************************】
对于键盘操作来说，光标的基本操作不外乎最基本的三个键：左箭头（left arrow）、右箭头（right arrow）和退格键（backspace）。
左箭头：让光标向左移动，添加字符或者删除字符
右箭头：让光标向右移动，添加字符或者删除字符
退格键：删除字符
【******** 在聊如何通过js实现光标具有的基本功能时，先介绍一些html和css ********】
***html***
<p class="cursor_module">
<p class="cursor_content"></p><span class="cursor"></span>
</p>
注意：上面的html格式只是模拟光标，输入字符还是需要靠表单元素的。在页面上，笔者会把真正的表单元素隐藏，只会显示模拟光标的html
<form id="chatting_form" class="clearfix" enctype="application/x-www-form-urlencoded">
<label for="chatting_msg"></label><input type="text" id="chatting_msg" autofocus name="chatting_msg">
</form>
第一行：模拟光标 第二行：表单元素里的光标
***css***
.cursor_module{
position: relative;
}
.cursor_content{
position: absolute;
top: 0;
left: 0;
width: auto;
max-width: 90%;
word-wrap: break-word;
overflow: hidden;
display: inline-block;
white-space: pre;
}
.cursor{
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 16px;
display: inline-block;
background: green;
z-index: 1000;
}
【*************************** 正式开始介绍js ******************************】
**左箭头**
1、没有输入文字，按下左箭头，光标仍处于left值为0的位置。
2、当输入了文字后（即：文本框的value值不为空），按下左箭头，光标向左移动。
限制条件：当移动到left值为0的位置时，即使继续按左箭头，光标都不会继续向左移动【光标在其left值必须大于0的条件下才可以移动】
if(ccode===37 && chatting_msg.value!=''){
if(aspan_l>0){
aspan.style.left=aspan_l-aspan_w+'px';
}
}
**右箭头**
1、没有文字输入，按下右箭头，光标仍处于left值为0的位置。
2、当输入了文字后，按下右箭头，光标向右移动。
限制条件：当移到文本内容最后一个字符的后面时，即使继续按右箭头，光标都不会继续向右移动【光标的left值等于p元素的宽度时，就是光标处于最后一个字符的位置】
else if(ccode===39 && chatting_msg.value!=''){
aspan.style.left=aspan_l+aspan_w+'px';
if(aspan_l===ap_width){
aspan.style.left=ap_width+'px';
}
}
**退格键**
1、当没有字符存在的时候，按下删除键，模拟光标并不会向左移动，保持在原有的位置
2、删除一个字符，光标的位置就向左移动一个单位（在这个例子中是6px）；
else if(ccode===8){
if(chatting_msg.value!=''){
ap.innerhtml=chatting_msg.value;
if(aspan_l!=0){
aspan.style.left=aspan_l-aspan_w+'px';
}
}else{
aspan.style.left=0;
}
//if enter backspace,remove move event
jm.removehandler(chatting_msg,'input',move,false);
}
**其他按键**
else{
//show value by keyup not keydown,because keydown will slow step;
jm.addhandler(chatting_msg,'keyup',function () {
ap.innerhtml=chatting_msg.value;
},false);
jm.addhandler(chatting_msg,'input',move,false);
}
var move=function () {
var aspan=jm.geteles('.cursor')[0],
aspan_l=parseint(jm.getstyle(aspan,'left')),
aspan_w=parseint(jm.getstyle(aspan,'width'));
aspan.style.left=aspan_l+aspan_w+'px';
};
问题：为什么笔者会将输入框的value值赋值给p元素的innerhtml这行代码【ap.innerhtml=chatting_msg.value;】放置在 keyup 事件处理程序中？
在事件为keydown（或keypress）情况下，执行将文本框的value值赋值给p元素的innerhtml，实际情况下，如果输入两个字符 ‘ab’，但是在p元素内显示的就只有第一个字符 ‘a’。
简单来说就是，keydown或keypress对于文本框本身而言显示字符是没有问题，就是你输入多少个字符就显示多少个字符，但是对于要将文本内容显示在p元素内，则会 “反应慢一拍” 。
【提示：笔者对其他非字符键还未作任何处理】
【************************* 补充 ******************************】
1、为了在按下退格键时不影响光标的正确定位，需要在按下退格键时把 ”move“函数取消掉
-------jm.removehandler(chatting_msg,'input',move,false);
2、代码中存在的jm.xxxx，是笔者的代码库
jm.addhandler(...)：添加事件处理程序
jm.removehandler(...)：删除事件处理程序
jm.getstyle(...)：获取计算机样式的值
>>>>>>>>>>>具体的代码可以参考《javascript高级程序设计》这本书
3、笔者自定义的这个光标现在只适合于输入英文、数字、标点符号，暂时不支持输入中文
《《《《《《《 完整代码 》》》》》》》》》
var cursor=(function () {
var chatting_msg=jm.geteles('[name=\'chatting_msg\']')[0];
var cursor_module=jm.geteles('.cursor_module')[0];
var chatting_footer=jm.geteles('.chatting_footer')[0];
//create elements
var cp=document.createelement('p');
var cspan=document.createelement('span');
jm.addclass(cp,'cursor_content');
jm.addclass(cspan,'cursor');
jm.addnodes(cursor_module,cspan);
jm.addnodes(cursor_module,cp);
//keydown
jm.addhandler(chatting_msg,'keydown',function (event) {
var ev=jm.getevent(event),
ccode=jm.getcharcode(ev);
var ap=jm.geteles('.cursor_content')[0],
aspan=jm.geteles('.cursor')[0];
var ap_width=parseint(jm.getstyle(ap,'width'));//get ap real width
var aspan_l=parseint(jm.getstyle(aspan,'left')),//get span left
aspan_w=parseint(jm.getstyle(aspan,'width'));//get span width
var val=chatting_msg.value;
//left arrow
//没有value值，按左箭头不动
//有value值，按右箭头，光标向左移，但移到前面一个字符的后面就不可以再移动
if(ccode===37 && chatting_msg.value!=''){
if(aspan_l>0){
aspan.style.left=aspan_l-aspan_w+'px';
}
}
//right arrow
//没有value值，按右箭头不动
//有value值，按右箭头，光标向右移，但移到最后一个字符的后面就不可以再移动
else if(ccode===39 && chatting_msg.value!=''){
aspan.style.left=aspan_l+aspan_w+'px';
if(aspan_l===ap_width){
aspan.style.left=ap_width+'px';
}
}
//backspace
else if(ccode===8){
if(chatting_msg.value!=''){
ap.innerhtml=chatting_msg.value;
if(aspan_l!=0){
aspan.style.left=aspan_l-aspan_w+'px';
}
}else{
aspan.style.left=0;
}
//if enter backspace,remove move event
jm.removehandler(chatting_msg,'input',move,false);
}
else{
//show value by keyup not keydown,because keydown will slow step;
jm.addhandler(chatting_msg,'keyup',function () {
ap.innerhtml=chatting_msg.value;
},false);
jm.addhandler(chatting_msg,'input',move,false);
}
},false);
//move cursor in the text
var move=function () {
var aspan=jm.geteles('.cursor')[0],
aspan_l=parseint(jm.getstyle(aspan,'left')),
aspan_w=parseint(jm.getstyle(aspan,'width'));
aspan.style.left=aspan_l+aspan_w+'px';
};
})();
更多关于通过js获取文本框光标位置及定位到文本框的方法请关注！