Question

我们知道可以在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已升级到新规则，如果没有用户首次初始化，则无法获取clipboarddata。

方法3-使用“onpaste”事件。当数据粘贴在div上时 - ＆gt;设置焦点在隐藏的textarea - ＆gt;从隐藏的textarea获取价值并设置为div 通过使用setTimeout - ＆gt;清楚隐藏的textarea。

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

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

对于IE，请使用clipboarddata。

对于Mozilla，其他人（不支持html5） - 任何人都知道Google是如何做到的？

提示：使用iframe designmode？

对于Chrome（支持html5） - 只需将DIV设置为Contenteditable =“仅限纯文本”。

Answer 1

我用于此类事情的技巧是使用屏幕<textarea>，这对用户不可见。

textarea是焦点，并有一个键盘处理程序，通知用户是否在textarea中键入。当我检测到用户正在键入时，我抓住textarea的值并将其转储到div中。

这是基本的想法。你需要更多的东西来获得正确的外观和感觉：

你不能只用display：none或visibility：hidden来隐藏textarea，因为这通常会使它对输入和事件不敏感。因此，您需要将其设置得非常小并将其放置在屏幕外部，或将其堆叠在其他元素后面。
你将不得不检测textarea是否模糊并决定是否需要重新聚焦它。
你需要div上的点击处理程序，这样如果人们点击div，你可以专注于textarea，这样人们就可以再次开始输入。

这种方法的好处是一般的键盘处理，如ctrl +光标，剪切+粘贴等都完全按预期工作，而不必自己编码 - 你只是捎带textarea的现有功能

以下是一个如何运作的示例：

（一个javascript shell）