codepen、codecademy、およびGoogle docsなどのウェブサイトでテキスト入力はどのように機能しますか？

-2

彼らはテキストエリアを使用していません。彼らは明らかに、テキストであったはずの要素を配置しています。そのようなものを構築するガイドがあり、カーソルがどこに行くのかなどをどのように把握しているかを示します。

redditの横には、ほとんどの人気サイトが実際にデフォルトのhtml textarea要素を使用しています。

ほとんどの場合、カスタムの強調表示があり、さまざまなことが起こっています。これは、直接編集している外観を与えるhtmlを生成しますが、javascriptはテキストエリア/テキスト入力を模倣しています。

CodepenはCodeMirror：https://github.com/codemirror/codemirrorを使用しているようです。コードエディタの表示を可能にする無料のオープンソースライブラリです。

一般的な考え方は、すべてのマウスクリック（javascript get x and y coordinates on mouse click）ですべてのマウスの位置を検出して、偽のカーソルを表示/非表示することです。カーソルが置かれると、すべてのキーを検出して何をすべきかを決定します。

複雑なJavaScriptを使用する代わりに、HTMLのcontenteditableプロパティを使用しています。このようなdiv内のコンテンツは、CSSでスタイル設定可能で、通常のJavaScriptで編集可能で、操作が簡単です。これは、Facebookが、それらの入力を作る方法です：

2017-12-30 06:06:47

私はそれが非常に似てあなたがテキストエリアのスタイルを設定することができますが、内容は内部簡単styleableない –

をのcontentEditableできることが、その後、それは同様のスタイルテキストエリアに可能だと思います。 'contenteditable'は実際にページ内の実際のHTMLコードを編集します。これがFacebookの入力方法です。 –

答えて