Textarea充满了线条

Question

是否有任何html组件或者textarea可能是这样的？

我想在我的网络应用中创建一个论文区域。我尝试使用文本框，但他必须单击下一个文本框或选项卡才能执行此操作。如果用户到达终点并移动到下一行，我希望它自动中断。

Answer 1

http://i.stack.imgur.com/fwQrz.pngIf您可以使用html5，您可以使用contenteditable属性并创建重复的背景图片并将其应用于您用作论文区域的div。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable

http://jsfiddle.net/KeTtb/2

抱歉，我错过了明显的答案！这只是将背景图像应用于textarea。

http://jsfiddle.net/SwbB3/1

textarea {
    background: url(http://i.stack.imgur.com/fwQrz.png);
    width:640px;
    height:172px;
}

Answer 2

这是一个使用数据URI（demo）

的人

使用此HTML：

<textarea placeholder='type your answer here'></textarea>

这个CSS：

textarea {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAMgSURBVHhe7cuxCcAAEMSw33/pZAEXVwUCErj0AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACfesZW9VareqtVvdWq3mpVb7Wqt1rVW63qrVb1Vqt6q1W91arealVvtaq3mtVcreqtVvVWq3qrVb3Vqt5qVW+1qrda1Vut6q1W9VareqtVvdWq3mpVbzWruVrVW63qrVb1Vqt6q1W91arealVvtaq3WtVbreqtVvVWq3qrVb3Vqt5qVnO1qrda1Vut6q1W9VareqtVvdWq3mpVb7Wqt1rVW63qrVb1Vqt6q1W91azmalVvtaq3WtVbreqtVvVWq3qrVb3Vqt5qVW+1qrda1Vut6q1W9VareqtZzdWq3mpVb7Wqt1rVW63qrVb1Vqt6q1W91arealVvtaq3WtVbreqtVvVWs5qrVb3Vqt5qVW+1qrda1Vut6q1W9VareqtVvdWq3mpVb7Wqt1rVW63qrWY1V6t6q1W91arealVvtaq3WtVbreqtVvVWq3qrVb3Vqt5qVW+1qrda1VvNaq5W9VareqtVvdWq3mpVb7Wqt1rVW63qrVb1Vqt6q1W91arealVvtaq3mtVcreqtVvVWq3qrVb3Vqt5qVW+1qrda1Vut6q1W9VareqtVvdWq3mpVbwUAAAAAAAAAAAAAAL9z9wLhMdZwPdQSQQAAAABJRU5ErkJggg==);
    background-size: 30px auto;
    line-height: 30px;
    width: 100%;
    height: 300px;
}