javascript - 使用画布元素作为文本区域

Question

我正在寻找关于如何使用类似于文本区域的画布元素的直接描述。

我看过诸如Ace之类的项目。只是想知道如何去写入该区域，就好像它在文本区域中一样。只是纯文本，没有什么花哨的。

提前致谢。

Answer 1

Ace 曾经是 Mozilla Skywriter，它曾经是 Mozilla Bespin。

Bespin 的代码实际上很容易理解，如果你愿意深入研究它并基于它制作你自己的代码，但这有点像傻瓜的差事。Canvas 规范实际上特别建议不要这样做：

作者应避免使用 canvas 元素实现文本编辑控件。这样做有很多缺点：

必须重新实现插入符号的鼠标放置。

插入符号的键盘移动必须重新实现（可能跨行，用于多行文本输入）。

必须实现文本字段的滚动（水平滚动用于长行，垂直滚动用于多行输入）。

必须重新实现诸如复制和粘贴之类的本机功能。

必须重新实现拼写检查等原生功能。

必须重新实现拖放等原生功能。

必须重新实现页面范围的文本搜索等原生功能。

必须重新实现特定于用户的本机功能，例如自定义文本服务。这几乎是不可能的，因为每个用户可能安装了不同的服务，并且可能存在无限多的此类服务。

双向文本编辑必须重新实现。

对于多行文本编辑，必须为所有相关语言实现换行。

必须重新实现文本选择。

必须重新实现双向文本选择的拖动。

必须重新实现平台原生键盘快捷键。

必须重新实现平台原生输入法编辑器 (IME)。

撤消和重做功能必须重新实现。

必须重新实现可访问性功能，例如插入符号或选择之后的放大。这是一项巨大的工作，强烈建议作者避免使用 input 元素、textarea 元素或 contenteditable 属性来避免做任何事情。

Answer 2

用 chrome 检查现场演示显示他们使用 div 和 span 来实现这一点。闪烁的光标是一个似乎定期在隐藏和可见之间切换的 div。我认为他们只是从事件中检查按下的键并将其写入该行的相应跨度。