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

Question

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

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

Answer 1

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

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

附加解决方案

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

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

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

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

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

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

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

Answer 2

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 3

你可以使用jQuery奇数选择器。

http://api.jquery.com/odd-selector/

$("input[type=textarea]:odd").css("background-color", "#bbbbff");
$("input[type=textarea]:even").css("background-color", "#cccccc");

我实际上误读了这个问题，并意识到他的意思是在textarea内不交替textareas ..