bootstrap可编辑整个表单

Question

我试图制作一些比平常更光滑的形式。我正在看Bootstrap Editable但是你可以在当时编辑一个字段。 所以我一直在寻找一种方法来使整个表单可编辑。

要明确我想要一个像普通文本的用户个人资料一样的页面，按下＆＃34;编辑＆＃34;更改为Web表单;文本字符串更改为文本框等....

我自己可以做到这一点，但我已经看过这样做的形式，但我现在无法找到它们中的任何一个并且google没有找到任何有用的东西。

问题是，是否有库/插件或我应该自己做？

Answer 1

执行此操作不需要太多代码。

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

只读：

编辑：

Answer 2

这应该非常简单。为你的元素定义一些标记（在我的例子中我使用了span），并挂钩一个事件监听器来检查编辑按钮/链接上的点击，并用输入替换文本。

示例：https://jsfiddle.net/dwynzhfg/2/

这段代码当然可以清理一下并进行优化。您需要弄清楚如何最好地处理实际将值传递给您的服务器（如果正在保存该值，可能是!editable分配到POST返回服务器的挂钩？）