Question

我遇到了很多在线编辑器（例如dillinger），当用户在textarea内部点击时，有焦点的线会改变颜色。我很想知道这里的东西是怎么运作的。不仅仅是线条颜色，还有编辑器编辑部分可能出现的任何样式，我完全没有意识到它。我在谷歌搜索时遇到了斑马条纹的概念，但我不认为它与可编辑部分有任何关系，其中单行必须动态聚焦。

虽然似乎可以实现，但是怎么样？

PS：请不要提供任何现有工具/实用程序来实现此目的。我更喜欢重新发明轮子。如果这不是一条简单的道路，至少可以提供最好的知识。

提前致谢。

Answer 1

这是一个textarea，但它下面有许多div（即较低的z-index）以特定的方式设置它。更具体地说，这是Ace editor，因此他们可能会在文档中详细说明它们的一些影响。

例如，如果您检查该页面的来源，您会发现类ace_active-line，您可以看到它是位于textarea下面的div。 textarea具有透明的背景，这就是为什么你能够看到下面的div。

Answer 2

最简单地说，这是通过CSS选择器的使用来实现的，特别是：focus 。

即使使用分层div和其他附带元素，您也可以在最顶层 div处于焦点时设置这些div的样式，例如：

input div.inner-input {
   border: 1px black;
}

input:focus div.inner-input {
   border: 1px orange;
}

当输入成为焦点时，这也可以通过jQuery进一步实现编辑另一个div的类或属性。

input.onFocus() {
    $('.under-div').addClass('active-line');
}

Answer 3

嗯，如果你想重新发明轮子，你也需要建造道路来使用轮子。在这种情况下，您无法在textarea中工作（如标签中所述）。相反，编辑器的渲染将全部都是你的。

其中一种方法是：

为文本输入的区域创建一个<div>容器。
在第一个内创建另一个<div>。这将是我们的重叠。确保它具有较低的z-index。让我们说z-index: 1。
在第一个容器下创建第三个<div>容器。这将是实际的文本编辑器。它必须具有透明background和更高z-index。
将<div>放入容器＃2中。它将成为我们的行荧光笔。

对于编辑器中的每一行，您都需要呈现自己的<div>，其中包含<span>文本。是的，很多自定义代码：当用户点击Enter以开始新行等等时，你需要编写适当的函数来推送新<div>。

您还需要确保这些row-div的高度固定为某个最小值（由您决定计算背后的值和公式），可能是基于窗口高度的东西，可能是用户偏好或字体大小）。它可以增长，例如当用户启用自动换行时。

当所有这一切都完成后，真正的魔法可以开始：突出显示。让我们想象一下，我们已经加载了三行文档。它看起来像这样：

<div id="textContainer">
    <div id="overlay" style="z-index: 1">
        <div id="highlighter" style="background: yellow; display: block;">
        </div>
    </div>
    <div id="textEditor" style="background: transparent; z-index: 100;">
        <div>
            <span>Line 1</span>
        </div>
        <div>
            <span>Line 2</span>
        </div>
        <div>
            <span>Line 2</span>
        </div>
    </div>
</div>

现在，您可以确定屏幕上textContainer的确切位置和宽度：它需要轻松（并且性能开销很小）处理不同的屏幕/窗口大小。

当用户专注于某一行时，您需要运行一些JavaScript来抓取该行（top）的当前height和<div>值，用户专注于并将<div id="highlighter">位置和高度设置为相同。

Answer 4

使用css焦点功能在焦点输入框时更改轮廓颜色。

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

工作小提琴：https://jsfiddle.net/gwLgckvf/

更改输入或文本区域内焦点的线条颜色

4 个答案: