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

StackOverflow https://stackoverflow.com/questions/153061

题

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

有帮助吗？

解决方案

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

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

其他提示

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

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

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

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

我想知道你要做的事情就像下面的情景一样：

<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();
}

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top