关于如何使就地编辑可降解的任何想法？答案

【问题标题】：Any ideas on how to make edit-in-place degradable?关于如何使就地编辑可降解的任何想法？
【发布时间】：2008-09-30 13:43:03
【问题描述】：

我目前正在为 MooTools 编写一个就地编辑脚本，但对于如何在不使用 JavaScript 的情况下使其优雅降级同时仍然具有一些功能，我感到有些困惑。我想以某种方式使用渐进增强。我不是在寻找代码，而是更多关于如何处理这种情况的概念。如果您有任何想法或知道任何优雅降级的就地编辑脚本，请分享。

【问题讨论】：

标签： javascript mootools graceful-degradation progressive-enhancement edit-in-place

【解决方案1】：

听起来你可能是从错误的方向接近这个。与其创建就地编辑并使其很好地降级（Graceful Degradation 角度），不如创建一个非 Javascript 版本进行编辑，然后在页面加载后使用 Javascript 添加就地编辑，参考作为Progressive Enhancement。

对此有两种选择。使用无需 Javascript 的提交按钮将显示创建为表单，然后使用 Javascript 将输入替换为执行就地编辑的某种标签。您应该能够使用标签和 id 属性的组合来选择正确的属性，以便您的就地编辑实现工作。如果您不希望默认显示表单，则另一个选项是使用按钮/链接显示值，以便使用服务器端处理将其转换为表单，然后向其中添加即时编辑。

【讨论】：

【解决方案2】：

如果没有 JavaScript，您根本无法进行就地编辑，因此优雅的降级包括确保当 JavaScript 不可用时用户仍然可以编辑有问题的项目。

因此，我只需要一个链接来编辑有问题的整个项目，然后在页面加载时在 JavaScript 中创建就地编辑控件，如果您不想让用户使用编辑，则隐藏编辑链接-可用时就地。

【讨论】：

【解决方案3】：

如果是文本内容，您可以将可编辑内容显示为输入类型的提交按钮，并将内容作为标题。单击时，它将提交整个表单，保留其他值，并显示一个编辑对话框。之后可以恢复表单值。

【讨论】：

【解决方案4】：

也许在每个具有就地编辑的元素下的 div 中放置一个输入。当页面加载时，使用 javascript 隐藏这些 div。这样，它们只有在 javascript 永远不会触发时才可用。

【讨论】：

【解决方案5】：

我假设您正在尝试做的事情类似于以下场景：

<li>
    <span id="editable">Editable text</span> <a class="edit_button"> </a>
</li>

其中是一个将替换为的按钮，以便可以对其进行编辑。有几种方法可以使其优雅地降级（即在没有 javascript 的情况下工作）。

理论上：

使用 CSS，使用伪选择器来完成。 :active 有点像 onclick 事件，所以如果你在

中嵌套一个隐藏的，这个 CSS 会隐藏并在点击 li 时显示。李：活动#可编辑{ 显示：无； } 李：主动输入{ 显示：块； }

这可能在您最喜欢的浏览器中工作，但毫无疑问您会发现它在 IE 中中断。

在实践中：

使用链接。让成为一个实际链接，该链接指向已在服务器端完成此输入/跨度替换的页面。您在上粘贴一个事件处理程序，该处理程序使用 MooTools 取消拥有 JS 的人的点击事件，如下所示：

函数make_editable（evt）{ var evt = 新事件（evt）； evt.preventDefault(); }

【讨论】：

【解决方案6】：

尝试使用带样式的输入文本，并在页面加载后使用 readonly 属性将其设为只读。当点击它时，删除只读属性，然后 onblur 再次使其只读。单击“保存”按钮或 onblur 事件时发出 Ajax 请求以将数据保存在服务器中。

【讨论】：