エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
第17回 「その場編集」を実装する:もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)|gihyo.jp … 技術評論社
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
第17回 「その場編集」を実装する:もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)|gihyo.jp … 技術評論社
「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その... 「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる,テキストをクリックすると,その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると,テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら,input要素が編集後の文字に置き換わる。 フォーカス外れた時,valueの値が空なら最初の値に戻す。 本来であれば,上記の仕組みの4の後に,PHPなどでデータベースに編集後の情報を送信し,保存するという仕組みになるのですが,今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 jQuery(funct