JavaScript/HTML 为输入类型文本区域替换行颜色？

Question

有没有一种简单的方法可以让 HTML </code> 交替其行颜色 改进编辑？

我不介意解决方案是纯 CSS 还是需要 JavaScript。

Answer 1

textarea {
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;
}

在 codepen 上找到了这个。为我工作。

Answer 2

如果我理解正确，您希望颜色在文本区域内交替（如每行）？

我建议最简单的方法是在文本区域中使用背景图像，并使替代颜色的行与字体大小/行高具有相同的高度，以创建替代行的错觉，然后重复背景图像。

其他解决方案

但是，似乎使用该方法，背景不会随着每行滚动。

我能想到的最好的技术是使用 James Padolsey 的名为“autoResize”的 jQuery 插件。其作用是删除滚动条，并且当​​文本接近 textarea 底部时，textarea 高度会相应增加。

现在，这可能会导致问题，因为您可能会拥有非常长的文本区域，具体取决于用户写入的文本量，但我已经为此创建了一个修复程序。

我们可以做的是将 textarea 包装在 div 中，并将 overflow-y （垂直）设置为 scroll以及overflow-x（水平）到hidden。现在，它的作用是在我们的 textarea 上提供一个“假”滚动条，创造出它是可滚动的错觉，因此我们的背景现在看起来就像它也与文本一起上下滚动一样。

您必须相应地调整宽度/高度/边距/边框/填充等，并可能检查跨浏览器兼容性，但这应该有助于您走上正确的轨道并让您继续前进。

以下是我使用上述方法创建的示例的链接：

http://jsfiddle.net/HelloJoe/DmPLH /

Answer 3

CSS 现在支持 nth child 语法。查看 MDN 文档，了解仅更改无序列表中所有其他列表项的背景颜色的示例：

HTML:

<p>NBA players with most championships:</p>
<ul>
    <li>Bill Russell</li>
    <li>Sam Jones</li>
    <li>Tom Heinsohn</li>
    <li>K. C. Jones</li>
    <li>Satch Sanders</li>
    <li>John Havlicek</li>
    <li>Jim Loscutoff</li>
    <li>Frank Ramsey</li>
    <li>Robert Horry</li>
</ul>

CSS:

li:nth-child(even) {
    background-color: lightyellow;
}

RESULT:

使用 CSS 的 nth-child 语法使文本区域中的每隔一行具有不同颜色的示例

SOURCE:

https://developer.mozilla.org/en-US/docs /Web/CSS/:nth-child