如何制作一个非常简单的彩色单行文本区域？

时间：2016-12-03 10:44:17

标签： javascript html css

我正在Electron制作一个正则表达式编辑器，我想在顶部制作一个正则表达式输入框。我已经看过Atom的方式了 - 通过将大量div放在彼此顶部，其中包含有色部分的跨度。

到目前为止，我已经这样做了：

<body onload="load()">
    <div class="container">
      <div class="regex-input">
        <div class="line" id="line">
          <span class="red">Hello</span>
          <span class="black">, world</span>
          <span class="orange">!</span>
        </div>
      </div>
    </div>
</body>

我也有一大堆CSS太大而无法提出问题，这使得它看起来像这样：

Example

有关如何执行此操作的任何提示？我一直在网上寻找一种方法，但我找不到任何东西。

这是我想要的一种形象:(来自http://regexr.com）

Regexr

1 个答案:

答案 0 :(得分：1)

已经有很好的工具可以做到这一点，你不必编写自己的工具。 CodeMirror是一个非常受欢迎的工具，请查看this。

如果你想自己编写，一种方法是不使用输入元素，使用跨度来表示每个标记，并使用闪烁的div来表示光标。捕获键盘键并相应地导航闪烁的div，并在用户键入新标记时删除，着色和添加跨度。

相关问题
最新问题