可以DIV替换TextArea

Can DIV replace TextArea

本文关键字：TextArea 替换 DIV 可以      更新时间：2023-09-26

正如我们所知，可以在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上粘贴数据时->设置焦点在隐藏的文本区域->从隐藏的文本区获取值并设置到div通过使用setTimeout->清除隐藏的文本区域。

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

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

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

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

提示：使用iframe设计模式？

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

我在这类事情中使用的技巧是有一个屏幕外的<textarea>，它对用户不可见。

文本区域是聚焦的，并且有一个键盘处理程序，用于注意用户是否在文本区域中键入。当我检测到用户正在键入时，我获取文本区域的值并将其转储到div中

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

  1. 不能只使用display:none或visibility:hidden隐藏文本区域，因为这通常也会使其对键入和事件不敏感。所以你需要把它做得很小，放在屏幕外面，或者把它堆在其他元素后面
  2. 你必须检测文本区域是否模糊，并决定是否需要重新聚焦
  3. 您需要在div上有一个点击处理程序，这样，如果人们点击div，您就可以将注意力集中在文本区域，这样人们就可以重新开始键入

这种方法的好处是，通用的键盘处理，如ctrl+光标和剪切+粘贴等，都可以完全按照预期工作，而不必自己编写代码——你只是在利用文本区域的现有功能。

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

http://js1k.com/2012-love/demo/1168

（javascript shell）

相关文章：