クリックするとテキストボックスにかわるラベルを実装
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へ変更すれば、テキストエリアでも使用できます。
デモ
関連記事
-
-
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
カレンダー実装プラグイン「Bootstrap Calendar」
「Bootstrap Calendar」はBootstrap 3ベースでカレンダーが実装できるjQueryプラグインです。 ダウンロード スクリプト
-
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
-
時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 目次 実装方法 モダール形式 Datepicker
-
-
画像ズーム プラグイン
画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
レスポンシブに対応したテーブルを実装できる「FooTable」
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード #v2にアップデートされたため刷
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
リストをインクリメント検索・ソートできる「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