Question

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

Answer 1

听起来你可能正在从错误的方向接近这个。你应该创建一个非Javascript版本进行编辑，然后在页面加载后使用Javascript添加就地编辑，而不是创建就地编辑并使其降级（优雅的降级角度），为Progressive Enhancement。

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

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>

＆lt; a＆gt;是一个替换＆lt; span＆gt;的按钮使用＆lt; input＆gt;，以便可以编辑它。有几种方法可以让它优雅地降级（即没有javascript工作）。

理论上：

使用CSS，使用psuedo-selectors。：active有点像onclick事件，所以如果你嵌套一个隐藏的＆lt; input＆gt;在＆lt; li＆gt;中，此CSS隐藏＆lt; span＆gt;并显示＆lt; input＆gt;当点击li时。

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

这可能适用于您最喜欢的浏览器，但毫无疑问，您会发现它在IE浏览器中出现故障。

在实践中：

使用链接。有那个＆lt; a＆gt;是一个实际链接，转到服务器端已完成此输入/跨度替换的页面。你在＆lt; a＆gt;上粘贴了一个事件处理程序。使用MooTools为有JS的人取消点击事件，如下所示：


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

Answer 6

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

关于如何进行可编辑就地降级的任何想法？

6 个答案: