文本输入如何适用于codepen，codecademy和google docs等网站？

Question

它们是可编辑的，但却具有自定义突出显示功能。

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

在reddit旁边，很少有热门网站实际使用默认的html textarea元素。

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

Answer 1

Codepen似乎正在使用CodeMirror：https://github.com/codemirror/codemirror。它是免费的开源库，允许显示代码编辑器。

一般的想法是，他们会在每次鼠标点击（javascript get x and y coordinates on mouse click）时检测每个鼠标位置，以显示/隐藏假光标。放置光标后，它们会检测每个按键以确定要执行的操作。

使用复杂JavaScript的另一种方法是使用HTML中的contenteditable属性。这样一个div中的内容可以在CSS中设置样式，并且可以使用通常的JavaScript进行编辑，这样可以更容易操作。 Facebook就是这样做的投入：