クリックするとテキストボックスにかわるラベルを実装
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へ変更すれば、テキストエリアでも使用できます。
デモ
関連記事
-
わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」
サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし
-
Amazonのような画像ズーム機能が実装できる「SergeLand Image Zoomer」
「SergeLand Image Zoomer v3.0」はAmazonなどでみられるマウスオーバーで画像をズームしてくれる機能を実装できるjQueryプラグインです。 ダウンロード *黄色ボタン
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
色々なタイプの画像ギャラリーが実装できる「Rondell」
「Rondell」は、様々なタイプの画像ギャラリーを実装してくれるjQueryプラグインです。 カルーセル・スライダー・ギャラリーなど一通り実装可能です。 ダウンロード 本家デモ
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
- 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