JavaScript カスタムテキストボックスカーソルのコードの詳細-jsチュートリアル-php.cn

この記事では、テキストボックスカーソルをカスタマイズするための参考値となるJavaScriptメソッドの例を中心に紹介します。以下のエディターで見てみましょう

テキストボックス（入力またはテキストエリア）のカーソルはスタイルで変更できません（カラーによるカーソルの色の変更を除く）。しかし、著者は、個人が独自の Web サイトを作成するときに、テキストボックス内のカーソルが独自のスタイルになることを望んでいます。したがって、テキストボックスのカーソルをシミュレートして、独自のスタイルでカーソルをデザインしてみてください。以下は作者の個人的な感想です。

【************************基本的な考え方******************** **** *******】

キーボード操作において、カーソルの基本操作は左矢印、右矢印、バックスペースキー（バックスペース）の最も基本的な3つのキーに他なりません。

左矢印: カーソルを左に移動し、文字を追加または文字を削除します

右矢印: カーソルを右に移動し、文字を追加または文字を削除します

Backspaceキー: 文字の削除

【********JSを通してカーソルの基本機能を実装する方法について話すとき、最初にいくつかの html と css を紹介しましょう ********]

***html***

ログイン後にコピー

注: 上記の HTML 形式はカーソルのみをシミュレートしており、文字の入力には引き続きフォーム要素が必要です。ページでは、作成者は実際のフォーム要素を非表示にし、カーソルをシミュレートする HTML のみを表示します

ログイン後にコピー

1 行目: シミュレートされたカーソル 2 行目: フォーム要素内のカーソル

***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 テキストが入力されていない場合は、左矢印を押します。、カーソルはまだ左の値が 0 の位置にあります。

2. テキストを入力した後 (つまり、テキストボックスの値が空でない場合)、左矢印を押すと、カーソルが左に移動します。

制限事項: 左の値が 0 の位置に移動する場合、左矢印を押し続けても、カーソルは左に移動し続けません [カーソルは左の値が 0 より大きい場合にのみ移動できます。 0]

if(cCode===37 && chatting_msg.value!=''){ if(aSpan_l>0){ aSpan.style.left=aSpan_l-aSpan_w+'px'; } }

ログイン後にコピー

**右矢印**

1. テキスト入力がない場合は、右矢印を押します。カーソルは左側の値が 0 の位置にあります。

2. テキストを入力したら、右矢印を押してカーソルを右に移動します。

制限事項: テキストコンテンツの最後の文字の後ろに移動する場合、右矢印を押し続けても、カーソルは右に移動し続けません[カーソルの左の値が文字の幅と等しい場合] 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'; } }

ログイン後にコピー

**Backspace**

1. 文字が存在しない場合、deleteキーを押すと、シミュレートされたカーソルは左に移動せずに残ります。元の位置で

2. 文字を削除すると、カーソルの位置が 1 単位左に移動します (この例では 6 ピクセル)。作成者は入力ボックスの値を変更しましたか? p 要素の innerHTML に値を割り当てるコード行 [aP.innerHTML=chatting_msg.value;] がキーアップ

イベント処理

プログラムに配置されていますか?イベントがkeydown(またはkeypress)の場合、p要素のinnerHTMLにテキストボックスの値が代入されますが、実際には「ab」の2文字を入力するとp内に表示される内容が変わります。要素は最初の文字「a」のみです。

簡単に言うと、テキストボックス内に文字を表示すること自体は、キーダウンやキープレスで問題なく表示されますが、テキストの内容がp要素に表示される場合は、「反応してください」「ゆっくりしてください。」【ヒント: 作者はその他の文字キー以外の処理を行っていません】

【************************* ***補足* *****************************】

１．バックスペースキーを押したとき位置決め、バックスペースキーを押したときに「移動」機能をキャンセルする必要があります

-------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 カスタムテキストボックスカーソルのコードの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。