JavaScript

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

Sara

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

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

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

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

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

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

動画

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

YouTube チャンネルはこちら

解説

1. レイアウトの作成

HTML の作成

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

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

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

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

クラス名について

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

13行目
onkeyup="count_up(this);"

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

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

18行目
onkeyup="count_down(this);"

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

CSS の追加

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

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

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

2. カウントアップの実装

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

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

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

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

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

3. カウントダウンの実装

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

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

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

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

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

4. 完成

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

どこでエラーが起きているかわからない時

ブラウザのデベロッパーツール(開発ツール)を開いて、コンソールを確認してみてください。

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

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

サンプルコード

Q
index.html
guest
0 Comments
Inline Feedbacks
View all comments
ABOUT ME
Sara
Sara
運営者
書籍やオンライン講座でプログラミングを勉強してフリーランスのプログラマーになりました。
このサイトでは「わかりやすく・シンプル」をモットーに、プログラミングの基礎からアプリ開発まで紹介します。
独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています。
本格的に学びたい方へ

Code for Fun プログラミング講座

Code for Fun プログラミング講座では、プログラミングの基礎からアプリ開発まで学ぶことができます。

わかりやすく・シンプルをモットーに

  • 同じコードを書けば必ず完成できること
  • 専門用語を使いすぎないこと

を重視しています。

POINT 01

動くコード

プログラミングの文法だけを学んでも、そこから動くアプリを開発をするのは難しいです。

Code for Fun のプログラミング講座では、ゲームやカレンダーなど「アプリとして機能するもの」を作りながらプログラミングを学ぶことができます。

POINT 02

自分のペースで

オンライン講座なので、ご自身のペースで学習を進めて頂けます。

分からないことがあっても、前のレッスンに戻ることができるので安心です。

お申し込みしたその日からからすぐに始めることができます。

POINT 03

個別サポート

プログラミング学習では、エラーが起きることはよくあります。そんな時はお気軽にお問い合わせください!

コメント欄またはメールによるサポートを回数無制限でご利用頂けます。(*講座に関連するご質問のみ対応)

今すぐ無料でお試し

0
この記事にコメントするx
記事URLをコピーしました