关于如何使就地编辑可降解有什么想法吗？

Question

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

Answer 1

听起来你可能是从错误的方向来处理这个问题的。 您实际上应该创建一个非 Javascript 版本进行编辑，然后在页面加载后使用 Javascript 添加就地编辑，而不是创建就地编辑并使其很好地降级（优雅降级角度），请参考作为渐进增强。

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

Answer 2

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

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

Answer 3

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

Answer 4

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

Answer 5

我假设您想要做的事情类似于以下场景：

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

其中 是一个替代 的按钮 带有 ，以便可以对其进行编辑。 有几种方法可以使其优雅地降级（即无需 javascript 即可工作）。

理论上：

使用 CSS，使用伪选择器来实现。 :active 有点像 onclick 事件，因此如果您嵌套隐藏的 在

中，此 CSS 隐藏了 。 并显示<输入> 当点击 li 时。

li:active #editable {
    display:none;
}
li:active input{
    display:block;
}

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

实践：

使用链接。 有那个 是一个实际链接，该链接转到已在服务器端完成此输入/跨度替换的页面。 您将事件处理程序粘贴在 上 有JS的人使用MooTools取消点击事件，像这样：

function make_editable(evt) {
    var evt = new Event(evt);
    evt.preventDefault();
}

Answer 6

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