jQuery

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

 

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

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


 

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

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

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


 

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

JavaScript での実装方法はこちら

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

 


 

動画

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

 
 

解説

HTML の作成

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

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

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


 

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

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

 

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

 

id 名について

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

クラス名について

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

 
 

CSS の追加

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

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

 
 

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

 
 

jQuery の読み込み

jQueryを読み込む方法は2つあります。

  1. ファイルをダウンロードする
  2. CDNを利用する

今回はダウンロードではなく CDN(コンテンツデリバリネットワーク)を利用します。

CDN を使うとインターネット経由でファイルを読み込むことができるので、ダウンロード不要で簡単に使うことができます。

CDN を提供しているサイトはいくつかありますが、今回は私がいつも使っている「Google Hosted Libraries」を紹介します。

「Google Hosted Libraries」で検索、または Google Hosted Libraries にアクセスして jQuery のコードをコピペします。
 


 
 

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

 
 

カウントアップの実装

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

3~5行目を追加します。

 

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

4行目では「テキストエリアの文字数を取得して #count1 に文字数を表示する」という処理を書いています。

#countUp に対して keyup イベントをセットしているので $(this) は #countUp を指しています。


 
 

カウントダウンの実装

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

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

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

 

remain は入力できる残りの文字数です。

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

 
 

完成

 
 

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

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

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


 

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

 
 

サンプルコード

 
 

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

COMMENT

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