手机端描述编辑怎么无缝连接_具有HTML5内容的无缝页内编辑

手机端描述编辑怎么无缝连接

Traditionally there are just two ways to interact with web pages: form elements and links. For many sites, those methods will continue to work fine… but in some cases, you may want to blur or eliminate the line between page content and user input. To achieve that, we can use the simplest - and longest - HTML5 attribute you’ll ever see: contenteditable.

传统上，只有两种与网页交互的方式： 表单元素和链接 。 对于许多站点，这些方法将继续正常工作……但是在某些情况下，您可能希望模糊或消除页面内容和用户输入之间的界限。 为此，我们可以使用您将看到的最简单和最长的HTML5属性 ： contenteditable 。

contenteditable is a “boolean” HTML5 attribute: only the attribute needs to be present in order for the feature to work. For the example at the top of this article, the code is:

contenteditable是一个“布尔” HTML5属性：只有该属性需要存在才能使功能起作用。 对于本文顶部的示例，代码为：

<h1 contentEditable>Everything changes.</h1>

contenteditable can also be set on container elements, such as <figure> and <div>, which allows their content to be edited.

也可以在容器元素上设置contenteditable ，例如<figure>和<div> ，以允许编辑其内容。

HTML5 is case-insensitive, and will work whether you use contentEditable or contenteditable. Given that it is one of the few concatenated words in HTML, and by far the longest, I would suggest using the former for enhanced readability.

HTML5不区分大小写，无论您使用contentEditable还是contenteditable可以使用。 鉴于它是HTML中为数不多的串联词之一，并且到目前为止最长，我建议使用前者来增强可读性。

contentEditable can also be set to true (the same as the attribute being used by itself), false (turns off inline editing for the element or its content) and inherit. Images can also be contentEditable, but this only means they can be removed: inserting images onto the page would typically be achieved with the file input and / or the HTML5 Drag and Drop API.

contentEditable也可以设置为true (与自身使用的属性相同)， false (关闭元素或其内容的内联编辑)和inherit 。 图像也可以是contentEditable，但这仅意味着可以将其删除 ：通常通过file输入和/或HTML5拖放API将图像插入页面。

contentEditable owes its existence to Microsoft: a variation of the attribute has been in Internet Explorer since version 5.5. It’s therefore doubly ironic that it has some serious bug issues in IE 10 and 11.

contentEditable归功于Microsoft：自5.5版以来，Internet Explorer中就已经存在该属性的变体。 因此，具有讽刺意味的是，它在IE 10和11中存在一些严重的错误问题 。

中途 (Halfway There)

As with most HTML5 inputs, the contentEditable attribute is only half the story: any change the user makes to editable content will only be retained so long as the browser tab remains open. Closing the tab, or refreshing the page, will revert the content to its default value.

与大多数HTML5输入一样 ， contentEditable属性只是故事的一半：只要浏览器选项卡保持打开状态，用户对可编辑内容所做的任何更改都将保留。 关闭选项卡或刷新页面，会将内容恢复为其默认值。

A “seamless” interface like this would typically save the information using JavaScript: saving the content as JSON data to localStorage with each keypress, for example. That process is complex enough to leave for another article.

像这样的“无缝”界面通常会使用JavaScript保存信息：例如，每次按键时将内容作为JSON数据保存到localStorage。 该过程非常复杂，因此无需再撰写其他文章。

情境就是一切 (Context is Everything)

contenteditable is cool, so it might be tempting to use it in place of every text form element. Broadly speaking, that would be a mistake: users are accustomed to form elements, which have far greater accessibility affordances than contenteditable, and they remain appropriate in most circumstances for gathering user input.

contenteditable很酷，因此可能会倾向于使用它来代替每个文本表单元素。 从广义上讲，这是一个错误：用户习惯于使用表单元素，而表单元素的可访问性要比contenteditable大得多，并且在大多数情况下它们仍然适合于收集用户输入。

So where can you use contenteditable? Currently the best showcase might be Squarespace, which uses the attribute to allow site owners to edit text on their web pages. This is instinctive and (for Squarespace users) straightforward: most people don’t need a fully fledged text editor for their web pages; they just want to edit content in context. That’s where contenteditable is likely to be most applicable: allowing the user to edit default content on a page.

那么在哪里可以使用contenteditable ？ 当前，最好的展示柜可能是Squarespace ，它使用该属性允许网站所有者编辑其网页上的文本。 这是本能的，并且(对于Squarespace用户而言)非常简单：大多数人的网页不需要完整的文本编辑器； 他们只想在上下文中编辑内容。 那就是contenteditable最适用的地方：允许用户编辑页面上的默认内容。

You can also use contenteditable - or a variation on it - to help test your web pages during development. The exact length of site content is often unknown during the design phase, leaving front-end developers unsure if shorter or longer measures of text will “break” the page at different viewport sizes. Rather than changing the content in the CMS or HTML and then reloading the page, open the console while viewing the page and type:

您还可以使用contenteditable或它的变体来帮助在开发过程中测试您的网页。 在设计阶段，站点内容的确切长度通常是未知的，从而使前端开发人员无法确定较短或较长的文本尺寸是否会在不同的视口大小下“破坏”页面。 而不是更改CMS或HTML中的内容然后重新加载页面，而是在查看页面并键入以下内容时打开console ：

document.designMode = "on"

This makes every element on the page effectively contentEditable, meaning that you can type temporary changes to content directly in the browser for testing purposes.

这使页面上的每个元素都有效contentEditable ，这意味着您可以直接在浏览器中键入内容的临时更改以进行测试。

SVG和contentEditable (SVG & contentEditable)

Being an HTML attribute, contentEditable cannot be used directly on SVG. However, if the SVG is inline in the document, you can add contentEditable to an HTML element around it:

作为HTML属性， contentEditable不能直接在SVG上使用。 但是，如果SVG是内嵌在文档中，你可以添加contentEditable它周围HTML元素：

<div contenteditable="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 60">
        <text>CONTENT</text>
    </svg>
</div>

For example, the code above will allow the text content CONTENT to be edited by the user.

例如，上面的代码将允许用户编辑文本内容CONTENT 。

翻译自: https://thenewcode.com/113/Seamless-In-Page-Editing-with-HTML5-contentEditable

手机端描述编辑怎么无缝连接