Javascript 像codepen、codecademy和google docs这样的网站的文本输入是如何工作的？

它们是可编辑的，但具有自定义高亮显示

他们没有使用textarea。很明显，他们将元素放在了应该放在文本中的地方。是否有这样的指南，可以构建类似的内容，并显示如何确定光标的位置，等等

除了reddit之外，很少有流行站点实际使用默认的HTMLTextArea元素

---

大多数都有自定义的突出显示和各种各样的事情，它们生成html，让您直接编辑外观，但它是javascript模仿文本区域/文本输入。

Codepen似乎在使用CodeMirror:。它是一个免费的开源库，允许显示代码编辑器

一般的想法是，它们在每次鼠标单击（）时检测鼠标位置，以显示/隐藏假光标。一旦光标被放置，他们会检测每一次按键来决定要做什么

使用复杂JavaScript的替代方法是在HTML中使用

contenteditable

属性。这样一个div中的内容可以用CSS设置样式，并且可以用普通的JavaScript进行编辑，这使得它更易于操作。Facebook就是这样输入信息的：

---

我认为也可以设置textarea的样式，这使得它与ContentEditable非常相似。您可以设置textarea的样式，但其中的内容不容易设置样式

contenteditable

实际编辑页面中的真实HTML代码。Facebook就是这样做的。