JavaScript自定义文本框光标(2)

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'; }; })();

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！　　

您可能感兴趣的文章: