JavaScript / HTML为输入类型textarea交替行颜色？答案

【问题标题】：JavaScript/HTML to alternate row colors for input type textarea?JavaScript / HTML为输入类型textarea交替行颜色？
【发布时间】：2011-10-10 13:57:32
【问题描述】：

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

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

【问题讨论】：

不是文本区域，但可以查看 HTML5 的 ContentEditable 属性：html5demos.com/contenteditable

标签： javascript html css textarea

【解决方案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 上找到了这个。为我工作。

【讨论】：

添加“背景附件：本地；”让 textarea 文本随背景滚动。太棒了！
另外，如果你想改变 line-height 的大小，你也必须按比例改变 background-size。此外，使用顶部填充向上/向下移动 textarea 文本。设置它很奇怪，但它是可能的！

【解决方案2】：

如果我理解正确，您希望在 textarea 内交替显示颜色（如每一行）？

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

其他解决方案

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

我能想到的最佳技术是使用由 James Padolsey 开发的名为“autoResize”的 jQuery 插件。这样做会移除滚动条，当您的文本接近 textarea 的底部时，textarea 的高度会相应增加。

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

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

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

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

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

【讨论】：

感谢非常酷的解决方案。除非有人在不使用图片的情况下提出建议，否则我会打勾。
只要您的行高/字体变化与“行”颜色的背景图像的高度匹配，这将起作用
这听起来是个好主意。我认为在 textarea 中没有其他简单的方法可以做到这一点
@HelloJoe 这不起作用。我试过了。想象你的身高是 14 像素。图像是 28 像素（红色顶部橙色底部）问题是您假设您的文本始终位于文本区域的顶部，而这可能不是。由于滚动，文本可能会被部分截断。
我明白您的意思，我可以帮助您尝试找出替代解决方案，除非您自己已经找到了解决方案？