BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

textareaの動的な残り単語を取得するメソッドの実装方法

2022-01-26 02:15:41

仕事で今まで書いたことのないケースに遭遇し、午後半日かけてかじりつくように書き出したら、見事に達成！。もちろんjsイジメにはたいしたことないけど、自分のjsの実力としては小さな一歩です。

事例を紹介します。テキストエリアのテキストボックスがあるウェブサイトをよく見かけますが、文字を入力すると、下にあと何文字入力できるかを示すテキストが表示されます。もちろん、1つのページに複数のテキストエリアがあるので、1つのjsロジックで制御することは不可能なので、少しカプセル化する必要がある。もちろん、私のラッパーはまだ欠けていますが、基本的な機能は達成されています。

まず、textareaの実装例を一つ挙げてみましょう。

htmlセクションです。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < テキストエリア イド = <スパン "text_txt1"。 > <スパン </ テキストエリア >
  2. <スパン <スパン <

    スパン <スパン イド  = <スパン num_txt1"。 > <スパン 応募残り600字 </ スパン <スパン >

jsセクションです。

JavaScriptコード 内容をクリップボードにコピーする
  1. $( 機能 (){   
  2.    $( '#text_txt1' ).on( 'キーアップ' , 機能 (){   
  3. <スパン ヴァル  txtval = $( '#text_txt1' ).val().length;   
  4.        console.log(txtval)を実行します。  
  5. <スパン ヴァル  str = parseInt(600-txtval);   
  6.       console.log(str)。  
  7. もし (str > 0 ){。  
  8.           $( #num_txt1 ).html( 入力テーブルの残り +str+ 言葉 );   
  9.       } さもなくば {   
  10.           $( #num_txt1 ).html( 入力可能な文字数は残り0文字 );   
  11.           $( #テキスト_txt1 ).val($( #テキスト_txt1 ).val().substring(0,600));  // これは、中のテキストが0以下の場合、単語数を増やすことができず、600単語までしか増やせないことを意味する
  12.         }   
  13. //console.log($('#num_txt').html(str));
  14.     });   
  15. })  

次に、同じページの下に複数のtextareaの実装がある例を紹介します。

JavaScriptコード 内容をクリップボードにコピーする
  1. 機能  changeLength(obj,num){。  
  2.     obj.on() キーアップ , 機能 (){   
  3. ヴァル  txtval = obj.val().length;   
  4. //console.log(txtval);
  5. ヴァー  str = parseInt(600-txtval);   
  6. //console.log(str);
  7. <スパン もし (str > 0 ){。  
  8.             num.html( '残りの入力可能' +str+ <スパン 'ワード' );   
  9.         } その他  {   
  10.             num.html( '入力残り0ワード' );   
  11.             obj.val(obj.val().substring(0, 600));   
  12.         }   
  13. //console.log($('#num_txt').html(str));
  14.     });   
  15. }   
  16. $( 機能 (){  //ここに4つあるから、4回呼び出そう
  17.     changeLength($( '#text_txt1' ),$( '#num_txt1' ));   
  18.     changeLength($( '#text_txt2' ),$( '#num_txt2' ));   
  19.     changeLength($( '#text_txt3' ),$( '#num_txt3' ));   
  20.     changeLength($( '#text_txt4' ),$( '#num_txt4' ));   
  21. });  

もちろんここで実際に要求された文字数は関数の中でラップすることも可能ですが、ここではしません。こうすることで、テキストが入力されると、自動的にスパン内に残り語数が表示され、最大値が入力されると残り語数が0になり、新しいコンテンツが入力できなくなる。テキストが削除されると、スパンは動的に残り単語数を取得します。

以下は、今回、多かれ少なかれ他の人から借りたコードです。

htmlを使用します。

XML/HTMLコード 内容をクリップボードにコピーする
  1. <スパン < ディブ クラス = "family_v2"。 > <スパン
  2. <スパン <スパン <

    p クラス = <スパン "nickname_v2"。 > <スパン はじめに <スパン </ p >
  3. <スパン <スパン <

    テキストエリア イド = "コンテンツ"。 名称 = <スパン "記号" <スパン スタイル = <スパン "height:60px;overflow-y: hidden;"。
  4. <スパン オンキーアップ = <スパン "changeLength(this,60)"。 クラス = "ニックネームBox_v2 brief_box_v2" >
  5. <スパン <スパン </ テキストエリア >
  6. <スパン <スパン <

    ディブ クラス = "limit_num_v2"。 > <スパン
  7. <スパン <スパン <

    h3 > 60 <スパン </ h3 >
  8. <スパン <スパン </ ディブ >
  9. <スパン <スパン </ ディブ >

js:

JavaScriptコード 内容をクリップボードにコピーする
  1. //textareaの長さを検証する
  2. <スパン 機能  changeLength(obj,lg){。  
  3. <スパン ヴァル  len = $(obj).val();   
  4.     $(obj).next().find() h3" ).text(lg-len.length);   
  5. もし (len.length>=lg){。  
  6.         $(obj).next().find() h3" ).text(0);   
  7.         $(obj).val(len.substring(0,lg));   
  8.     }   
  9. }  

以上、textareaの残り単語を動的に取得する方法をお伝えしましたが、ご参考になれば幸いです。また、スクリプトホームを応援していただければ幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します