jquery - フォームに読み取り/編集モードを実装する

Question

2つの状態を持つフォームを実装しています。ユーザーが名前、年齢、住所などの情報を含むラベルから情報を読み取ることができる読み取り専用モード。これに加えて、ユーザーが情報を編集できる編集モードが必要です。

標準ビューは読み取り専用モードである必要があります。ユーザーが[編集]をクリックすると、ラベルがテキストボックスに変更されて編集可能になります。

html、css、jqueryを使用してこれを実装するための最良の方法は何ですか？

Answer 1

あなたが探しているのは「インプレース編集」と呼ばれるものです。車輪の再発明に時間を無駄にしないでください。:)

---

しかし、簡単なアイデアのために、あなたが始めるための短いスニペットを投稿します-

1. デフォルトでは常に編集モードでレンダリングします
2. 必要に応じて読み取り専用にする-次のように

---

 <form data-mode="read">
    <input value="Hello" />
 </form>

if($('form').data('mode') == 'read'){   //remove fields and add text
  $('form').find(':input').each(function(){
     $(this).replaceWith($('<span>' + $(this).val() + '</span>');
  });
 }

注：ラベルに置き換える代わりに、を使用してラベルを無効にする.prop('disabled', true)ことができます。