jQueryでInputフィールドを操作する小技いろいろ

SPONSORED LINK

Pocket

ちょっとメモ的にエントリー。Twitterなどでよくみる、リアルタイムに「あと何文字」を表示する方法などですよ。jQueryのコードがそのまま掲載されているので勉強になりますね。

紹介されているのは以下のような小技です。全部で5つですね。

  • 文字数をカウント
  • 入力された文字数をリアルタイムにカウントします。

    in_1

  • 残り文字数をカウント
  • 今度は逆に残り文字数を表示します。Twitterでよく見ますね。

    in_2

  • エラーチェック
  • 入力値によってエラーメッセージを表示します。

    in_3

  • リストから入力
  • リストをクリックしたらInputフィールドに値を入力します。

    in_4

  • リストへ入力
  • 逆にInputフィールドからリストへ値を入力します。

    in_5

実際のコード&マークアップは元記事をどうぞ。うまいこと使ってわかりやすいフォームを作りたいですね。

» jQuery Lessons Series: How to Interact with HTML Forms – woorkup.com

ツイッターもやっています!

SPONSORED LINK

  1. No comments yet.

  1. No trackbacks yet.