キャンバス要素をテキストアレアとして使用します

Question

テキスト領域のようなキャンバス要素を使用する方法の簡単な説明を探しています。

などのプロジェクトを見てきました エース. 。まるでテキストエリアのようにエリアに書き込む方法を疑問に思うだけです。ただのテキスト、派手なものは何もありません。

前もって感謝します。

Answer 1

エースはかつてモジラスカイライターでしたが、これはモジラベスピンでした。

ベスピンのコードは、実際には、あなたがそれを掘り下げてそれに基づいて自分で作ることをいとわないかどうかを理解するのが非常に簡単ですが、それは一種の愚か者の用事です。キャンバス仕様は実際にこれに対して特にアドバイスしています。

著者は、Canvas要素を使用してテキスト編集コントロールの実装を避ける必要があります。そうすることには、多数の欠点があります。

カレットのマウスの配置は再実装する必要があります。

カレットのキーボードの動きは、複数のテキスト入力の場合、おそらく線を越えて）再実装する必要があります。

テキストフィールドのスクロールを実装する必要があります（長い行の水平方向に、垂直には多段階の入力が必要です）。

コピーアンドパステなどのネイティブ機能を再実装する必要があります。

スペルチェックなどのネイティブ機能を再実装する必要があります。

ドラッグアンドドロップなどのネイティブ機能を再実装する必要があります。

ページ全体のテキスト検索などのネイティブ機能を再実装する必要があります。

ユーザーに固有のネイティブ機能、たとえばカスタムテキストサービスなど、再実装する必要があります。これは、各ユーザーが異なるサービスをインストールしている可能性があり、そのようなサービスの可能性のあるセットがあるため、これは不可能に近いものです。

双方向のテキスト編集を再実装する必要があります。

マルチラインテキスト編集の場合、関連するすべての言語に対してラインラッピングを実装する必要があります。

テキストの選択を再実装する必要があります。

双方向のテキスト選択のドラッグは再実装する必要があります。

プラットフォームネイティブキーボードショートカットを再実装する必要があります。

Platform-Native入力メソッドエディター（IME）を再実装する必要があります。

元に戻してやり直す必要がある必要があります。

拡大に続く拡大や選択などのアクセシビリティ機能を再実装する必要があります。これは膨大な量の作業であり、著者は、入力要素、Textarea要素、または満足のいく属性を使用する代わりに、そのいずれかを避けることを避けるように最も強く奨励されています。

Answer 2

Chromeを使用してライブデモを検査することで、Divとスパンを使用してこれを達成することが示されています。点滅するカーソルは、定期的に隠されたものと見えるものを切り替えるように見えるDIVです。彼らはイベントから押されたキーをチェックし、それをラインの対応するスパンに書くだけだと思います。