JavaScript 自定义文本框光标——初级版

来源:互联网 发布:ch341a编程器教程 编辑:程序博客网 时间:2024/05/16 11:37

文本框(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  class="clearfix" enctype="application/x-www-form-urlencoded">       <label for="chatting_msg"></label><input type="text"   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';    };})();

  

0 0