フォームへ入力されたテキスト文字数のカウントダウン表示する
最終更新日: Update!!
前回に引き続き、フォーム要素のカスタマイズに関するtipsです。お問い合わせフォームのテキスト入力欄などで文字数制限が設けられているケースがあるかと思います。そんな時に現在何文字入力されているかを表示させる機能をjQueryで実装していきます。
それではコードを見ていきます。HTMLでは今回サンプルとしてtextarea要素を使用していますが、その他の入力フォーム要素でも構いません。maxlength属性を入れていますが対応していないブラウザもありますので注意が必要です。CSSではデザインに合わせてスタイルをつけていきますが、今回のサンプルでは文字数が超えた時に赤色太字に変わるように設定しています。
【HTML・CSS】※一部抜粋
// HTML <textarea id="text-input" maxlength="50"></textarea> <span id="text-count">あと<span id="num">50</span>文字</span> // CSS #text-input { width: 100%; min-height: 200px; background: #eee; padding: 10px; margin: 0 0 15px 0; border: none; } #text-count { display: block; text-align: right; } #text-count.over { font-weight: bold; color: #c90000; }最後にjavascriptを見ていきます。テキストの入力される要素に対して、keydown、keyup、keypress、change、blurとそれぞれのイベントをカバーし、入力された文字数をlengthで取得します。デフォルトで設定した上限文字数から入力された文字数を引いた数値をナンバー部分に出力します。その時に文字数が超えているかを示すステータスをclassとして付与します。 【javascript】
$(function(){ $("#text-input").on('keydown keyup keypress change blur',function(){ var valueLength = $(this).val().length; var limitNum = 50 - valueLength if ( limitNum >= 1 ) { $("#num").html(limitNum); $("#text-count").removeClass('over'); } else if ( limitNum <= 0 ) { $("#num").html('0'); $("#text-count").addClass('over'); } }); });このように結構簡単に実装することができます。これがあるだけでユーザーに対する印象が変わってくるかと思います。今回のサンプルはこちらにあげていますのでご参考に。 (参考) jQueryで数字をカウントアップしながら表示する方法
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories