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

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

ちょっとメモ的にエントリー。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

@taguchiをフォロー！
Twitterもやっています！
Posted on October 21st, 2009 and last modified on October 21st, 2009.

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://www.ideaxidea.com/archives/2009/10/jquery_with_input_field.html/trackback
Listed below are links to weblogs that reference
jQueryでInputフィールドを操作する小技いろいろ from IDEA*IDEA ～ 百式管理人のライフハックブログ

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

百式ジョブボード（求人情報）
TwitterCounter
最近のつぶやき
Powered by…

ユーザー中心 ビービット
『IDEA*IDEA』のユーザビリティは、ユーザー中心のウェブサイト構築を手がけるビービット社によって検証・改善されています。

いろいろ

誠Biz.まID Webサービス図鑑
誠Biz.IDの「Webサービス図鑑」を応援中です！

あわせて読みたいブログパーツ
SEO
人気の商品
管理人の著書
Image of はじめてのGTD ストレスフリーの整理術
Image of シャングリラ・ダイエット~全米ベストセラー!「食事制限」なし!「運動」なし!の魔法のダイエット~
Image of 起業・企画・営業・雑談のネタは日常の諦めている不便利から
Image of アイデア×アイデア
Image of ストレスフリーの仕事術―仕事と人生をコントロールする52の法則
最近の写真
煮魚的な肉魚肉のすり身オイスター＆卵ケータイ購入TrueCafeトムヤムクン茹で豚肉とかぶのマヨポン酢あえきのことサーモンのクリームリゾット。白子のムニエルF-03B電車笑わせる機能画像合成指輪サイズ打ち上げ機能前科タグロック解除ポイント加算セピア
モバイル版
最近の記事
カテゴリー別
過去記事一覧

Return to page top