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

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

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

関連記事

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

Bootstrap Modal + 拡張機能が実装できるプラグイン

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768

no image

ローソク足チャート「jqPlot」

「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

no image

バリデーション プラグイン

Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2

画像ズーム プラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームする というような機能があるようです。

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

カルーセル プラグイン

「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り

Comment

Message

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

*

PAGE TOP ↑