クリックするとテキストボックスにかわるラベルを実装
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へ変更すれば、テキストエリアでも使用できます。
デモ
関連記事
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
-
シンプルにモーダルウィンドウを実装できる「leanModal」
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
レスポンシブにも対応したカレンダーを表示する「Calendario.js」
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト 実装 $(document).ready
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
様々なタイプのグラフ表示をカバーする「jqPlot」(折れ線グラフ)
Webページにグラフ表示する機会があったので、探してみました。 今回、使用してみた「jqPlot」がシンプルにもできてカスタマイズも豊富でいいです。グラフ用データの形式が少しクセがあり、動的に扱う際
-
-
実装方法が選べるツールチップ用プラグイン「Smallipop」
Smallipopは、ツールチップの実装をマークアップベース(HTMLに書き出し)とJavascriptベース両方で行えるjQueryプラグインです。世の中この手のツールは結構片方でのみだったりします
-
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
- 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