JavaScript カスタム テキスト ボックス カーソルのコードの詳細

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

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

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

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

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

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

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>

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 サイトの他の関連記事を参照してください。