JavaScript

【JavaScript】テキストエリア 文字数カウンターの作り方(カウントアップ・ダウン)

 

今回は JavaScript を使ったテキストカウンターの作り方を紹介します。

作るのはカウントアップとカウントダウンの二種類です。


 

カウントアップは、ユーザーが入力した文字数をカウントして表示するという基本的な文字数カウンターです。

カウントダウンは、あと何文字入力できるか、残りの文字数を表示します。入力できる文字数が決められているときに便利な機能です。

たとえば、Twitter では入力制限を超えると赤い文字で超過文字数を表示してくれます。


 

簡単に実装できるものですが、あると便利な機能です。
ぜひご自身のサイトにも実装してみてください🙂

jQuery で実装する場合はこちら

【jQuery】テキストエリア 文字数カウンターの作り方(カウントアップ・ダウン) 今回は jQuery を使ったテキストカウンターの作り方を紹介します。 作るのはカウントアップとカウントダウンの二種類です...

 


 

動画

JavaScript テキストエリア文字数カウンターの作り方

 
 

解説

HTML の作成

まずは HTML でフォームを用意します。

今回はテキストエリアや文字を見やすくするために Bootstrap を使用していきます。
Bootstrap を使えば自分で CSS を書かずにキレイなフォームやボタンを使うことができるのでとてもオススメです。

これから書く HTML の6行目はこちらのリンクの CSS をコピペしています。


 

Bootstrap の詳しい使い方はこちらでも紹介しています。

Bootstrap4の使い方・必要なファイルのインストール方法 ここでは Bootstrap 4 を使うための 必要なファイルのインストール方法 基本的な使い方 Bootstrap ...

 

HTML ファイルを作成して、以下のコードを追加してください。

 

id 名について

id 名(id="この部分")は JavaScript で要素を取得するために使います。
 

クラス名について

クラス名(class="この部分")は全て BootStrap のスタイルを反映するために書いています。
Bootstrap で指定されているものなので、変更してしまうとスタイルが反映されないのでご注意ください。
 

13行目

onkeyup="count_up(this);"

onkeyup はキーボードを押して指を離した時に呼ばれるイベントです。

ここではキーボードを押して指を離した時に、このあと書いていく count_up 関数を呼びます。
 

18行目

onkeyup="count_down(this);"

キーボードを押して指を離した時に、このあと書いていく count_down 関数を呼びます。
 
 

CSS の追加

このままだとフォームが見づらいので、少しだけスタイルを調整します。

7~16行目を追加してください。

 
 

このようになっていれば準備完了です。

 
 

カウントアップの実装

カウントアップは、文字を入力する毎にテキストエリアの文字数を取得・表示していきます。

2~4行目を追加します。

 

obj は カウントアップのテキストエリアを指しています。

obj.value.length では、.value でテキストエリアの文字を取得して .length で文字数を取得しています。

取得した文字数は id="count1" の要素に表示します。

 
 

カウントダウンの実装

カウントダウンでは入力できる残りの文字数を表示します。

ここでは文字制限数を30文字にして、30文字を超えた場合は -2 のように超過文字数を表示します。

6~15行目を追加します。

 

30 – obj.value.length が入力できる残りの文字数となります。

入力できる残りの文字数が 0 より小さくなった場合は テキスト色を赤に、まだ入力できる場合はテキスト色をグレーにしています。

 
 

完成

 
 

上手く動かないときは最後にサンプルコードを載せているので、そちらと比較してみてください。
 
 

どこでエラーが起きているかわからない時
ブラウザのデベロッパーツール(開発ツール)を開いて、コンソールを確認してみてください。

Chrome の場合
ブラウザの右上にあるメニューから「その他のツール」→「デベロッパーツール」を開きます。


 

「Console」を選択するとエラーを確認できます。

 
 

サンプルコード

 
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい🙂
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です