JavaScript自定義文本框光標(biāo)
文本框（input或textarea）的光標(biāo)無法修改樣式（除了通過color修改光標(biāo)顏色）。但筆者希望個人創(chuàng)建自己的網(wǎng)站時，文本框的光標(biāo)有屬于自己的風(fēng)格。所以，嘗試模擬文本框的光標(biāo)，設(shè)計有自己風(fēng)格的光標(biāo)。以下是筆者個人的想法。
【************************基本思路***************************】
對于鍵盤操作來說，光標(biāo)的基本操作不外乎最基本的三個鍵：左箭頭（left arrow）、右箭頭（right arrow）和退格鍵（backspace）。
左箭頭：讓光標(biāo)向左移動，添加字符或者刪除字符
右箭頭：讓光標(biāo)向右移動，添加字符或者刪除字符
退格鍵：刪除字符
【******** 在聊如何通過JS實現(xiàn)光標(biāo)具有的基本功能時，先介紹一些html和css ********】
***html***
<div class="cursor_module"> <p class="cursor_content"></p><span class="cursor"></span> </div>
注意：上面的html格式只是模擬光標(biāo)，輸入字符還是需要靠表單元素的。在頁面上，筆者會把真正的表單元素隱藏，只會顯示模擬光標(biāo)的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>
第一行：模擬光標(biāo) 第二行：表單元素里的光標(biāo)
***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、沒有輸入文字，按下左箭頭，光標(biāo)仍處于left值為0的位置。
2、當(dāng)輸入了文字后（即：文本框的value值不為空），按下左箭頭，光標(biāo)向左移動。
限制條件：當(dāng)移動到left值為0的位置時，即使繼續(xù)按左箭頭，光標(biāo)都不會繼續(xù)向左移動【光標(biāo)在其left值必須大于0的條件下才可以移動】
if(cCode===37 && chatting_msg.value!=''){
if(aSpan_l>0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}
**右箭頭**
1、沒有文字輸入，按下右箭頭，光標(biāo)仍處于left值為0的位置。
2、當(dāng)輸入了文字后，按下右箭頭，光標(biāo)向右移動。
限制條件：當(dāng)移到文本內(nèi)容最后一個字符的后面時，即使繼續(xù)按右箭頭，光標(biāo)都不會繼續(xù)向右移動【光標(biāo)的left值等于p元素的寬度時，就是光標(biāo)處于最后一個字符的位置】
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、當(dāng)沒有字符存在的時候，按下刪除鍵，模擬光標(biāo)并不會向左移動，保持在原有的位置
2、刪除一個字符，光標(biāo)的位置就向左移動一個單位（在這個例子中是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）情況下，執(zhí)行將文本框的value值賦值給p元素的innerHTML，實際情況下，如果輸入兩個字符 ‘a(chǎn)b'，但是在p元素內(nèi)顯示的就只有第一個字符 ‘a(chǎn)'。
簡單來說就是，keydown或keypress對于文本框本身而言顯示字符是沒有問題，就是你輸入多少個字符就顯示多少個字符，但是對于要將文本內(nèi)容顯示在p元素內(nèi)，則會 “反應(yīng)慢一拍” 。
【提示：筆者對其他非字符鍵還未作任何處理】
【************************* 補(bǔ)充 ******************************】
1、為了在按下退格鍵時不影響光標(biāo)的正確定位，需要在按下退格鍵時把 ”move“函數(shù)取消掉
-------JM.removeHandler(chatting_msg,'input',move,false);
2、代碼中存在的JM.xxxx，是筆者的代碼庫
JM.addHandler(...)：添加事件處理程序
JM.removeHandler(...)：刪除事件處理程序
JM.getStyle(...)：獲取計算機(jī)樣式的值
>>>>>>>>>>>具體的代碼可以參考《JavaScript高級程序設(shè)計》這本書
3、筆者自定義的這個光標(biāo)現(xiàn)在只適合于輸入英文、數(shù)字、標(biāo)點(diǎn)符號，暫時不支持輸入中文
《《《《《《《 完整代碼 》》》》》》》》》
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值，按右箭頭，光標(biāo)向左移，但移到前面一個字符的后面就不可以再移動
if(cCode===37 && chatting_msg.value!=''){
if(aSpan_l>0){
aSpan.style.left=aSpan_l-aSpan_w+'px';
}
}
//right arrow
//沒有value值，按右箭頭不動
//有value值，按右箭頭，光標(biāo)向右移，但移到最后一個字符的后面就不可以再移動
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';
};
})();
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
- Javascript實現(xiàn)獲取及設(shè)置光標(biāo)位置的方法
- js光標(biāo)定位文本框回車表單提交問題的解決方法
- JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
- js實現(xiàn)獲取焦點(diǎn)后光標(biāo)在字符串后
- js獲取光標(biāo)位置和設(shè)置文本框光標(biāo)位置示例代碼
- 在頁面中js獲取光標(biāo)/鼠標(biāo)的坐標(biāo)及光標(biāo)的像素坐標(biāo)
- js切換光標(biāo)示例代碼
- js/html光標(biāo)定位的實現(xiàn)代碼
- javascript textarea光標(biāo)定位方法(兼容IE和FF)
- JavaScript中在光標(biāo)處插入添加文本標(biāo)簽節(jié)點(diǎn)的詳細(xì)方法
相關(guān)文章
我們在進(jìn)行圖片保存的時候經(jīng)常會發(fā)現(xiàn)圖片跨域了,下面下面這篇文章主要給大家介紹了關(guān)于html2canvas圖片跨域問題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)自動輪換選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
js創(chuàng)建對象幾種方式的優(yōu)缺點(diǎn)對比
這篇文章主要對比了js創(chuàng)建對象幾種方式的優(yōu)缺點(diǎn)，感興趣的小伙伴們可以參考一下2016-09-09
JavaScript的async和await關(guān)鍵詞是現(xiàn)代JavaScript異步編程的核心,它們讓異步代碼看起來和同步代碼幾乎一樣,使得異步編程變得更加直觀和易于管理,本文介紹20個關(guān)于async/await的實用技巧,將大大提升編程效率和代碼的清晰度,需要的朋友可以參考下2023-12-12
Webpack-cli安裝成功后查看webpack -v報錯案例詳解
這篇文章主要介紹了Webpack-cli安裝成功后查看webpack -v報錯案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
asp作為主頁面，外接一個js的，我想知道一下能否在js里面調(diào)用asp的變量值，如果能這些值是怎么傳遞過去的呢？本文將提供解決方法，需要的朋友可以參考下2012-12-12
這篇文章主要介紹了解決localstorage存儲boolean類型值的小坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-06-06
select標(biāo)簽設(shè)置默認(rèn)選中的選項方法
下面小編就為大家分享一篇select標(biāo)簽設(shè)置默認(rèn)選中的選項方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Javascript 實現(xiàn)計算器時間功能詳解及實例（二）
這篇文章主要介紹了Javascript 實現(xiàn)計算器時間功能詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了Javascript數(shù)組與字典用法,以實例形式較為詳細(xì)的分析了Array作為數(shù)組與字典的不同用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12