文字方塊(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获取文本框光标位置及定位到文本框的方法请关注php中文网!