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

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

  • このエントリーをはてなブックマークに追加

関連記事

iTunesのCover Flowのようなギャラリーが実装できる「ContentFlow」

「ContentFlow」は、iTunesのCover Flowのように左右に流れるギャラリーが実装できるjQueryプラグインです。ダウンロード スクリプト 実装

テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」

「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト

Wysiwygエディタ用プラグイン「CKEditor」

「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表

no image

日付入力に便利な「Datepicker for Bootstrap」

「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン

画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ

no image

画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」

「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

入力数値の桁区切り挿入

ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu

Comment

@tomohito_a にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑