恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

【JavaScript】残り文字数などの文字カウンターを作成する方法

投稿日:

javascript

今日はJavaScriptで文字カウンターを作成する方法を紹介します。

また、単純な文字カウンターだけでなく、入力できる残り文字数を数える機能も実装します。

ツイッターの投稿画面なんかで文字を入力すると数字が減っていくあれです。

こちらが今回作るデモです。

 

まずHTMLです。

<p>
  <span id="textCount">0</span>文字入力しました。<br>
  あと<span id="textLest">200</span>文字入力できます。
</p>
<textarea id="textArea" cols="40" rows="15"></textarea>
<p id="textAttention" style="display:none; color:red;">入力文字数が多すぎます。</p>

 

次にJavaScriptです。

window.addEventListener("DOMContentLoaded", function(){
    var count = null,
    lest = null,
    max = 200,
    input_area = document.getElementById("textArea"),
    output_count = document.getElementById("textCount"),
    output_lest = document.getElementById("textLest"),
    attention = document.getElementById("textAttention");

    input_area.onkeyup = function(){
        var length = input_area.value.length;
        count = length;
        lest =  max - length;
        output_lest.innerText = lest;
        output_count.innerText = count;
        attention.style.display = ( length > max ) ? "block" : "none";
    }
}, false);

 

変数maxには最大入力文字数として200を設定しています。

 

onkeyupイベントでは、テキストボックスに入力した文字数に関する関数を作成しています。

変数lengthに入力した文字の長さを格納しています。

これを利用して、変数maxから入力した文字数(length)を引く式を作成すると残り文字数を取得することができます。

また、入力文字数が変数maxで指定した数値を超える条件分岐で「入力文字数が多すぎます」というテキストを表示させるようにしています。

 

お問い合わせフォームに文字の入力制限をかけたい場合などに役立ちます。簡単なのでぜひ覚えておきましょう。

この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

TOM

TOM

Webデザイナー、UI/UXデザインと共にJavascript、PHP等のプログラミング言語について日々勉強中。