如何在按钮单击时使 html 页面可编辑？答案

【问题标题】：How to make html pages editable on button click?如何在按钮单击时使 html 页面可编辑？
【发布时间】：2013-07-25 10:55:49
【问题描述】：

我正在使用 play 2.1.0 并使用 jquery 来设计一个 html 页面。我正在寻找当用户第一次登录我的网站时，UI 应该处于只读模式的功能。当用户单击“编辑”按钮时，网页上的某些字段将一次变为可编辑。编辑完成后，用户可以保存更改，网页将再次变为只读。

我搜索了一些 jquery 插件，但所有插件的工作方式都不同。他们使特定的 html 元素在 jquery 事件上可编辑。如果用户仅单击/双击该特定文本框，则文本框将变为可编辑。类似于 jeditable 插件http://www.appelsiini.net/projects/jeditable

有没有符合我要求的插件？还是有其他方法可以实现所需的功能？

编辑

我通过使用单独的文件进行编辑和查看解决了这个问题。我在会话中维护一个变量，并根据它的值呈现一个编辑或查看页面。

【问题讨论】：

你能不能只搜索所有输入并让它们像$('input, select, textarea').removeAttr('disabled') 或类似的东西一样可编辑？
我不能默认禁用所有元素，因为在阅读模式下，所有元素，如输入框、选择选项、文本区域应该看起来像一个普通的文本，就像它是一个标签一样。
您要求的是由插件完成的完整业务需求。不太可能会有一个。您可以使用您提到的插件并在此基础上进行构建。

标签： jquery html playframework playframework-2.1

【解决方案1】：

<script type="text/javascript">
$(function() {
  $('#EditButton').click(function(){
 $('.input').show();
  $('.label').hide();
 });

 </script>

 <li class="label"> <label>example</label></li>
 <li class="input"> <input type="text" value="example" /></li>

【讨论】：