ホームページ作成/フォームの活用・装飾 (HTML,CSS,JavaScript)

テキスト入力欄の文字数をリアルタイム表示

テキスト入力欄にユーザが何かを入力する際に、現在の入力文字数をリアルタイムに表示するようにしてみましょう。入力文字数に制限のある入力欄などで活用すると便利です。入力可能な残り文字数の表示もできます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

入力された文字数を表示する

テキストエディタの中には、現在の入力文字数をステータスバーなどにリアルタイムに表示してくれるものがあります。 JavaScriptを使うと、ウェブ上の入力フォームでも、ユーザが入力した文字数をカウントして表示することが簡単にできます。

下記の入力欄に何か文字列を入力してみて下さい。入力欄の右下に、入力文字数がリアルタイムに表示されます。
※JavaScriptが利用可能な環境でのみ

0文字

0文字

全角文字でも半角文字でも、1文字は1文字としてカウントされます。
※改行は、1文字(または2文字)としてカウントされます。
※古いブラウザでは、全角文字1つを2文字としてカウントする場合があります。

また、指定の文字数からカウントダウンさせることもできます。 下記の入力欄に何か文字列を入力してみて下さい。入力欄の右下に、入力可能な残り文字数がリアルタイムに表示されます。

あと100文字

あと15文字

※上側の複数行入力欄では、実際には100文字を超えても入力可能です。その場合、残数はマイナスで表示されます。 (textarea要素には最大入力文字数を指定するmaxlengthのような属性がないため)

今回は、このような「文字数をカウントできる入力欄」を作る方法をご紹介いたします。

【目次】

  • 1
  • 2
  • 3
  • 6
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます