クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいですよね~。そこで実装してみました。
スクリプト
<script type="text/javascript" src="jquery.min.js"></script>
実装
<div id="div802">3.25</div> <input id="div802-edit" name="div802" style="display:none;"></input> <script type="text/javascript"> $('#div802').click(function() { $('#div802').css( 'display', 'none'); $('#div802-edit') .val( $( '#div802').text()) .css( 'display', '') .focus(); }); $('#div802-edit').blur(function() { $('#div802-edit').css( 'display', 'none'); $('#div802') .text($('#div802-edit').val()) .css( 'display', ''); }); </script>
いたって単純です。
- 初期状態は、labelとして表示している要素(div802)を表示、テキストボックス(div802-edit)を非表示にしておく。
- div802がクリックされたら非表示('display', 'none')にして、div802-editを表示('display', '')させる。その際に、div802内の値を渡す(val($('#div802').text()))
- div802-editがblur(フォーカスがはずれた状態)になったらその逆を行う。
inputをtextareaへ変更すれば、テキストエリアでも使用できます。
デモ
関連記事
-
-
表示パターン豊富なスライダー「flexslider 2」
「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
エフェクト豊富なニュースティッカー用プラグイン「inewsticker」
「inewsticker」は、色々なエフェクトでニュースティッカーが実装できるjQueryプラグインです。ダウンロード エフェクトには、fade/slide/typingの3つが可能です。 デ
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」
「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
テキストに装飾効果を付けるプラグイン
Burn #テキストに炎のような効果 Burn サイト デモ スクリプト 実装 AAA $(function () { $('#defa
-
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
- PREV
- Flickrアカウントの作成
- NEXT
- "コメントを残す" 削除・文言を変更する方法
Comment
どうすっかな、この時間からテキスト編集も実装するか
https://t.co/wn1Lom1PEc
【クリックするとテキストボックスにかわるラベルを実装】
https://t.co/A8RNOo0Xmo
#jquery
クリックするとテキストボックスにかわるラベルを実装 http://t.co/pNNUj86agz
クリックするとテキストボックスにかわるラベルを実装 http://t.co/meE211FKQV
jQuery | クリックするとテキストボックスにかわ... http://owl.li/2DFm9q
別のinputを用意しておいて入力したものを代入させる編集機能
メモ UI的にはどうかと思うけど、実際には使えるタイミングはけっこうあるかもしれないなぁ。 「jQuery: クリックするとテキストボックスにかわるラベルを実装」 http://epx8.com/76933