dfltweb1.onamae.com – このドメインはお名前.comで取得されています。このドメインは、お名前.comで取得されています。 お名前.comのトップページへ Copyright © 2018 GMO Internet, Inc. All Rights Reserved.
第17回 「その場編集」を実装する | gihyo.jp
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 本来であれば、上記の仕組みの４の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu
jQueryでform要素を操作する
jQueryでform要素を操作する方法 ここではjQueryでform要素を操作する方法を説明します。 ■value属性の値を取得する .val() val要素を取得するために、val関数を利用します。 $("button").click(function(){ $("p").text($("input").value + "に送信します"); }); メールアドレス： 確認 ■value属性の値を変更する .val("something") val要素を変更するために、val関数を利用します。 $("button").click(function(){ $("input").val(""); //初期化を行う }); お名前： クリア ■フォーカスがあたったときに処理を行う .focus() form要素にフォーカスがあたったときに、処理を行います。 $("input").focu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
