我正在寻找关于如何使用类似于文本区域的画布元素的直接描述。
我看过诸如Ace之类的项目。只是想知道如何去写入该区域,就好像它在文本区域中一样。只是纯文本,没有什么花哨的。
提前致谢。
Ace 曾经是 Mozilla Skywriter,它曾经是 Mozilla Bespin。
Bespin 的代码实际上很容易理解,如果你愿意深入研究它并基于它制作你自己的代码,但这有点像傻瓜的差事。Canvas 规范实际上特别建议不要这样做:
作者应避免使用 canvas 元素实现文本编辑控件。这样做有很多缺点:
必须重新实现插入符号的鼠标放置。
插入符号的键盘移动必须重新实现(可能跨行,用于多行文本输入)。
必须实现文本字段的滚动(水平滚动用于长行,垂直滚动用于多行输入)。
必须重新实现诸如复制和粘贴之类的本机功能。
必须重新实现拼写检查等原生功能。
必须重新实现拖放等原生功能。
必须重新实现页面范围的文本搜索等原生功能。
必须重新实现特定于用户的本机功能,例如自定义文本服务。这几乎是不可能的,因为每个用户可能安装了不同的服务,并且可能存在无限多的此类服务。
双向文本编辑必须重新实现。
对于多行文本编辑,必须为所有相关语言实现换行。
必须重新实现文本选择。
必须重新实现双向文本选择的拖动。
必须重新实现平台原生键盘快捷键。
必须重新实现平台原生输入法编辑器 (IME)。
撤消和重做功能必须重新实现。
必须重新实现可访问性功能,例如插入符号或选择之后的放大。这是一项巨大的工作,强烈建议作者避免使用 input 元素、textarea 元素或 contenteditable 属性来避免做任何事情。
用 chrome 检查现场演示显示他们使用 div 和 span 来实现这一点。闪烁的光标是一个似乎定期在隐藏和可见之间切换的 div。我认为他们只是从事件中检查按下的键并将其写入该行的相应跨度。