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

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

这似乎是可以实现的，但如何实现呢

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

---

提前感谢。

这是一个文本区域，但它下面有许多div（即较低的z索引），用于以特定方式对其进行样式设置。更具体地说，这是一个示例，因此他们可以在文档中详细说明其影响

---

例如，如果您检查该页面的源代码，您将发现class

ace\u active-line

，您可以看到它是位于textarea下面的一个div。textarea有一个透明的背景，这就是为什么您可以看到下面的div。

这是一个textarea，但它下面有许多div（即较低的z索引），用于以特定方式对其进行样式设置。更具体地说，这是一个示例，因此他们可以在文档中详细说明其影响

---

例如，如果您检查该页面的源代码，您将发现class

ace\u active-line

，您可以看到它是位于textarea下面的一个div。文本区域有一个透明的背景，这就是为什么您可以看到下面的div。

最简单地说，这是通过使用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');
}

---

最简单地说，这是通过使用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');
}

---

嗯，如果你想重新发明轮子，你也需要修路来使用轮子。 在这种情况下，您不能在文本区域中工作（如标签中所述）。相反，编辑器的渲染将全部由您完成

其中一个办法是：

为要输入文本的区域创建一个

容器

在第一个内创建另一个

。这将是我们的覆盖。确保其具有较低的

z索引

。假设它是

z-index:1

在第一个容器下创建第三个

容器。这将是实际的文本编辑器。它必须具有透明的

背景

和更高的

z索引

在容器内放置一个

#2。这将是我们这一排的荧光灯

对于编辑器中的每一行，您都需要呈现自己的

，其中包含一个

文本。是的，有很多自定义代码：当用户点击Enter开始新行时，您需要编写适当的函数来推送新的

，等等

您还需要确保这些行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>

第1行
第2行
第2行

现在，您可以确定

textContainer

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

---

当用户关注某一行时，您需要运行一些JavaScript，获取用户关注的行（

）的当前

top

和

height

值，并将

位置和高度设置为相同。

如果您想重新发明轮子，你也需要修路来使用车轮。 在这种情况下，您不能在文本区域中工作（如标签中所述）。相反，编辑器的渲染将全部由您完成

其中一个办法是：

为要输入文本的区域创建一个

容器

在第一个内创建另一个

。这将是我们的覆盖。确保其具有较低的

z索引

。假设它是

z-index:1

在第一个容器下创建第三个

容器。这将是实际的文本编辑器。它必须具有透明的

背景

和更高的

z索引

在容器内放置一个

#2。这将是我们这一排的荧光灯

对于编辑器中的每一行，您都需要呈现自己的

，其中包含一个

文本。是的，有很多自定义代码：当用户点击Enter开始新行时，您需要编写适当的函数来推送新的

，等等

您还需要确保这些行div的高度固定为某个最小值