クリックするとテキストボックスにかわるラベルを実装
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へ変更すれば、テキストエリアでも使用できます。
デモ
関連記事
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 2014/06/16 Bootstrap3対応版に書き換え
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれる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