フォーム全体で編集可能なブートストラップ

Question

私はいつもよりも少し滑らかな形にしようとしています。私はBootstrap Editableを見ていましたが、編集可能な時点では1つのフィールドしか作成できません。 私はフォーム全体を編集可能にする方法を検討してきました。

明確にするために、通常のテキストのユーザープロファイルのようなページを作成したいと思います。「編集」を押すとWebフォームに変更されます。テキスト文字列がテキストボックスなどに変わります。

私はこれを自分で行うことができますが、それを行うフォームを見たことがありますが、今はそれらを見つけることができず、Googleは役に立たないものを見つけられません。

質問は、ライブラリ/プラグインがあるか、それとも自分でする必要がありますか？

Answer 1

これは非常に簡単で自分自身を行う必要があります。 （私の例ではspanを使用しました）あなたの要素のマークアップを定義し、編集ボタン/リンクのクリックを確認するためにイベントリスナーを接続し、テキストを入力と置き換えます。

例：このコードは確かに少しをクリーンアップし、最適化することができhttps://jsfiddle.net/dwynzhfg/2/

。実際に値をサーバーに渡すのをどのように処理するのがベストかを判断する必要があります（値が保存されている場合は!editableの割り当てをPOSTに戻してサーバーに戻すのがよいでしょう）。

Answer 2

これを行うための多くのコード。

HTML：

<div class="container"> 
<form class="is-readonly"> 
    <div class="form-group"> 
    <label for="exampleInputPassword1">Full Name</label> 
    <input type="text" class="form-control is-disabled" id="exampleInputPassword1" placeholder="Name" value="Jon Stewart" disabled> 
    </div> 
<div class="form-group"> 
    <label for="exampleInputEmail1">Email address</label> 
    <input type="email" class="form-control is-disabled" id="exampleInputEmail1" placeholder="Email" value="MyEmail@MyDowmain.Com" disabled> 
    </div> 
    <button type="button" class="btn btn-default btn-edit js-edit">Edit</button> 
    <button type="button" class="btn btn-default btn-save js-save">Save</button> 
</form> 
</div> 

のjQuery：

$(document).ready(function(){ 
    $('.js-edit, .js-save').on('click', function(){ 
    var $form = $(this).closest('form'); 
    $form.toggleClass('is-readonly is-editing'); 
    var isReadonly = $form.hasClass('is-readonly'); 
    $form.find('input,textarea').prop('disabled', isReadonly); 
    }); 
}); 

SCSS：

form { 
    &.is-readonly { 
    .btn-save { 
     display: none; 
    } 
    input,textarea{ 
     &[disabled] { 
     cursor: text; 
     background-color: #fff; 
     border-color: transparent; 
     outline-color: transparent; 
     box-shadow: none; 
     } 
    } 
    } 
    &.is-editing { 
    .btn-edit{ 
     display: none; 
    } 
    } 
} 

JsFiddle Working Example。

読み取り専用：

編集：