- 2009-10-21 (Wed) 8:15
- jQuery関連
ちょっとメモ的にエントリー。Twitterなどでよくみる、リアルタイムに「あと何文字」を表示する方法などですよ。jQueryのコードがそのまま掲載されているので勉強になりますね。
紹介されているのは以下のような小技です。全部で5つですね。
- 文字数をカウント
- 残り文字数をカウント
- エラーチェック
- リストから入力
- リストへ入力
入力された文字数をリアルタイムにカウントします。
![]()
今度は逆に残り文字数を表示します。Twitterでよく見ますね。
![]()
入力値によってエラーメッセージを表示します。
![]()
リストをクリックしたらInputフィールドに値を入力します。

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

実際のコード&マークアップは元記事をどうぞ。うまいこと使ってわかりやすいフォームを作りたいですね。
» jQuery Lessons Series: How to Interact with HTML Forms – woorkup.com
- Newer: ギークな妊婦さんにおすすめのTシャツ
- Older: 南極大陸がどれぐらいの大きさか、よくわかる一枚の画像・・・
Posted on October 21st, 2009
and last modified on October 21st, 2009.
Comments:0
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 ~ 百式管理人のライフハックブログ


























