JavaScript/HTML用于替换输入类型textarea的行颜色？

Question

是否有一种简单的方法可以让HTML <textarea>替换其行颜色以改进编辑？

我不介意解决方案是纯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

如果我理解你想要在textarea中交替出现颜色(如每一行)？

我建议最简单的方法是在textarea中使用背景图像,并使备用颜色的行与font-size/line-height的高度相同,以创建备用行的错觉,然后重复背景图像.

附加解决方案

但是,似乎使用该方法,背景不会随每行滚动.

我能想到的最好的技术是使用James Padolsey的一个名为'autoResize'的jQuery插件.这样做会删除滚动条,当文本接近底部时textarea,textarea高度会相应增加.

现在,这可能会导致问题,因为根据用户写入的文本数量,您可能会有非常长的textareas,但我已经为此创建了一个修复程序.

我们可以做的是将textareaa 包裹起来div并设置overflow-y(垂直)scroll和overflow-x(水平)到hidden.这样做现在给我们一个"假的"滚动条textarea,创造了它可滚动的错觉,所以我们的背景现在看起来好像它也随着文本上下滚动.

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

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

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