クリックするとテキストボックスにかわるラベルを実装

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へ変更すれば、テキストエリアでも使用できます。
デモ

Related

テキストボックス・エリアにプレースホルダーを実装 数値入力スライダー「jQuery Simple Slider」 入力数値の桁区切り挿入 日付入力に便利な「Datepicker for Bootstrap」 時刻入力に便利な「Timepicker for Bootstrap」 クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」 数値入力に便利なステッパーを実装「Numeric Stepper」 テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」