JavaScript 自定义文本框光标——初级版
Posted Jm_jing
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript 自定义文本框光标——初级版相关的知识,希望对你有一定的参考价值。
文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色)。但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格。所以,尝试模拟文本框的光标,设计有自己风格的光标。以下是笔者个人的想法。
【************************基本思路***************************】
对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow)、右箭头(right arrow)和退格键(backspace)。
左箭头:让光标向左移动,添加字符或者删除字符
右箭头:让光标向右移动,添加字符或者删除字符
退格键:删除字符
【******** 在聊如何通过JS实现光标具有的基本功能时,先介绍一些html和css ********】
***html***
<div class="cursor_module"> <p class="cursor_content"></p><span class="cursor"></span> </div>
注意:上面的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\'; }; })();
以上是关于JavaScript 自定义文本框光标——初级版的主要内容,如果未能解决你的问题,请参考以下文章
在光标使用 Javascript/jquery 的位置插入文本
在光标使用 Javascript/jquery 的位置插入文本
javascript 在文本框中的最后一个字符后设置光标/焦点
获取textarea文本框所选字符光标位置索引,以及选中的文本值;textarea高度自适应,随着内容增加高度增加;获取输入框中的光标位置