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

Question

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

Answer 1

听起来您可能是从错误的方向进行操作。 与其创建一个就地编辑并使其降级到很好的程度（优美的降级角度），不如说是创建一个非Javascript版本进行编辑，然后在页面加载后使用Javascript添加就地编辑，以作为逐步增强 。

有两种选择。 使用无需Javascript即可使用的Submit按钮将显示形式创建为表单，然后使用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>

<a>是将<span>替换为<input>的按钮，以便可以对其进行编辑。 有两种方法可以使它正常降级（即无需javascript就可以工作）。

理论上：

使用CSS，并使用psuedo-selectors。 ：active有点像onclick事件，因此，如果在<li>中嵌套一个隐藏的<input>，则单击li时，此CSS将隐藏<span>并显示<input>。

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

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

在实践中：

使用链接。 将该<a>设置为实际链接，该链接将链接到已在服务器端完成此输入/跨度替换的页面。 您将事件处理程序粘贴在<a>上，该处理程序使用MooTools取消具有JS的用户的click事件，如下所示：

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

Answer 6

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