使用画布元素作为文本区域 [英] Using a canvas element as a textarea

查看:23
本文介绍了使用画布元素作为文本区域的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm looking for a straight forward description of how to use a canvas element sort of like a text area.

我见过诸如 Ace 之类的项目.只是想知道如何写入该区域,就好像它在 textarea 中一样.只是纯文本,没什么特别的.

I have seen projects such as Ace. Just wondering how to go about writing to the area as if it where a textarea. Just plain text, nothing fancy.

提前致谢.

推荐答案

Ace 曾经是 Mozilla Skywriter,曾经是 Mozilla Bespin.

Ace used to be Mozilla Skywriter, which used to be Mozilla Bespin.

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

The code for Bespin is actually pretty simple to understand if you are willing to dig through it and make your own based on it, but it is sort of a fool's errand. The Canvas spec actually advises specifically against this:

作者应避免实施文本使用画布编辑控件元素.这样做有很大数量缺点:

Authors should avoid implementing text editing controls using the canvas element. Doing so has a large number of disadvantages:

插入符号的鼠标位置必须是重新实现.

Mouse placement of the caret has to be reimplemented.

插入符号的键盘移动必须被重新实现(可能跨越行,用于多行文本输入).

Keyboard movement of the caret has to be reimplemented (possibly across lines, for multiline text input).

文本字段的滚动必须是实施(水平长期线,垂直用于多线输入).

Scrolling of the text field has to be implemented (horizontally for long lines, vertically for multiline input).

本地功能,例如复制和粘贴必须重新实现.

Native features such as copy-and-paste have to be reimplemented.

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

Native features such as spell-checking have to be reimplemented.

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

Native features such as drag-and-drop have to be reimplemented.

本机功能,例如全页文本必须重新实现搜索.

Native features such as page-wide text search have to be reimplemented.

特定于用户的本机功能,例如自定义文本服务,有要重新实现.这接近不可能,因为每个用户可能都有安装了不同的服务,以及有一个无限可能的集合此类服务.

Native features specific to the user, for example custom text services, have to be reimplemented. This is close to impossible since each user might have different services installed, and there is an unbounded set of possible such services.

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

Bidirectional text editing has to be reimplemented.

对于多行文本编辑,行必须为所有人实施包装相关语言.

For multiline text editing, line wrapping has to be implemented for all relevant languages.

文本选择必须是重新实现.

Text selection has to be reimplemented.

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

Dragging of bidirectional text selections has to be reimplemented.

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

Platform-native keyboard shortcuts have to be reimplemented.

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

Platform-native input method editors (IMEs) have to be reimplemented.

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

Undo and redo functionality has to be reimplemented.

辅助功能,例如插入符号后的放大倍数或必须重新实施选择.这是一项巨大的工作,而且强烈鼓励作者避免做任何事情使用输入元素,textarea元素,或 contenteditable属性.

Accessibility features such as magnification following the caret or selection have to be reimplemented. This is a huge amount of work, and authors are most strongly encouraged to avoid doing any of it by instead using the input element, the textarea element, or the contenteditable attribute.

这篇关于使用画布元素作为文本区域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆