DIV可以代替TextArea吗答案

【问题标题】：Can DIV replace TextAreaDIV可以代替TextArea吗
【发布时间】：2012-03-08 09:52:46
【问题描述】：

我们知道可以在 DIV 中设置 contenteditable 以允许可编辑。它可以像Textarea一样。

然而最大的不同是“内容复制和粘贴”到 DIV 和 Textarea。

DIV 允许 html/plain 但 Textarea 仅提供纯文本。

以下是解决这些问题的方法：-

Method 1 - Direct using window.clipboardData.getData('Text') ( will prompt for asking permission).

问题：Mozilla 和 chrome 不支持剪贴板数据。

方法 2 - 使用闪存。

问题：Flash v.10 已升级到新规则，在没有用户先初始化的情况下无法获取剪贴板数据。

方法 3- 使用“onpaste”事件。当数据粘贴到 div -> 设置焦点时在隐藏的 textarea -> 从隐藏的 textarea 中获取值并设置为 div 通过使用 setTimeout -> 清除隐藏的文本区域。

问题：隐藏文本区域的时间设置值不一致。

我看到谷歌在这方面做得很好。

对于 IE，使用剪贴板数据。

对于 Mozilla，其他（不支持 html5） - 有人知道谷歌是如何做到的吗？

提示：使用 iframe 设计模式？

对于 Chrome（支持 html5） - 只需将 DIV 设置为 Contenteditable="plaintext-only"。

【问题讨论】：

【解决方案1】：

我用于这种事情的技巧是在屏幕外设置一个<textarea>，用户看不到它。

textarea 具有焦点，并有一个键盘处理程序，用于注意用户是否在 textarea 中键入。当我检测到用户正在输入时，我会抓取 textarea 的值并将其转储到 div 中。

这是基本思想。您需要更多的时间才能获得正确的外观和感觉：

您不能只使用 display:none 或 visibility:hidden 隐藏文本区域，因为这通常也会使其对输入和事件不敏感。因此，您需要将其做得非常小并将其放置在屏幕之外，或者将其堆叠在其他元素的后面。
您将必须检测文本区域是否模糊并决定是否需要重新聚焦。
您需要在 div 上添加一个点击处理程序，这样如果人们点击 div，您可以将注意力集中到 textarea 上，这样人们就可以再次开始输入。

这种方法的好处是一般的键盘处理，如 ctrl+cursor 和 cut+paste 等，都可以完全按照预期工作，而无需自己编写代码 - 你只是捎带了 textarea 的现有功能.

这是一个如何工作的示例：

（一个 JavaScript 外壳）

【讨论】：

感谢您的帮助！但它似乎不是那么一致。你知道 google+ 是如何工作的吗？
对于 chome（也可能是 safari），这个 CSS 似乎可以解决问题： div[contenteditable=plaintext-only] { -webkit-user-modify: read-write-plaintext-only; word-wrap：断词； -webkit-nbsp-mode：空间； -webkit-line-break：后空白； } 对于 Firefox，我相信他们使用的技术类似于我所描述的技术，只是他们似乎使用 iframe 来检测击键。
我已经测试过了。我们不能在菜单粘贴功能中使用。但是 google+ 在这个问题上没有任何问题。
抱歉出现问题。 Google 在使用菜单粘贴时也面临同样的问题。
loveshell 是一个完整的工作示例，但代码被制作为适合 1k，因此您必须投入一些工作来对其进行解码。确实菜单粘贴不起作用 - 从来没有想过。 Ctrl+V 粘贴确实有效。如果您愿意自己编写菜单，我想实现菜单粘贴是可行的。