javascript - 如何在 HTML 中创建一个外观和功能类似于带线条的打印文本框的可编辑文本框？

Question

我正在尝试使用 HTML/CSS/Javascript 创建一个可编辑的文本框，其外观和功能类似于打印的文本框，每行都有线条。

它必须看起来像这样，因为表格可能会打印在纸上供人们填写。

我看到了这种方法的三种方法:

1. 每行带有“border-bottom”的表格行，并使用 javascript 确定文本何时溢出，并在溢出时将光标移动到下一行的输入框。这种方法可能不是很准确。

2. 在包含文本的 div/textarea 下方绘制绝对定位线。

3. 使用 CSS3 重复渐变在 div/textarea 后面绘制线条。像这样:http://net.tutsplus.com/tutorials/html-css-techniques/lets-create-paper-with-css/.不过，此方法仅与现代浏览器兼容。

哪种方法最好，为什么？

Answer 1

Here’s one option .您需要一个 div 来绘制每条线，这可以事先完成或使用 JavaScript 完成。

简而言之，在您的 textarea 上设置明确的行高，然后在它后面绝对放置一个容器元素。在该容器内放置一组元素，其高度等于 textarea 的行高、一个像素的底部边框和一个负的一个像素的底部边距。

它与您的 #2 最相似，但更简单一些。