如何进行包装的多行输入或文本区域？

Question

我正在尝试在html中实现一个与打印时完全相同的布局：

Comments: _____________________________________________
_______________________________________________________

...下划线部分是某种单一输入标签 - 这意味着它也可以是textarea或其他东西，只要用户可以输入文本并将其打印出来。

要求：

• “Comments”文字必须与输入文字的第一行位于同一行
• 我不能只在“textarea”中加上“评论”这个词。
• 我无法使用多个文字输入
• 打印时，两行输入都应加下划线
• 我不能指望在打印之前提交的页面：我几乎做了客户端的所有事情。

原因是当从浏览器打印页面时，我必须从外部公司可视地重新创建纸质文档以完全匹配。这是内部“表格”系统的一部分，该系统在我与该公司之前预先确定。它的设置使这些表单自动在浏览器中调整了边距和标题，因此这不是问题。按照我需要的方式将格式化为 。

Answer 1

您可能希望有一个单独的样式表进行打印，当他们去打印时，丢失textarea并为显示打印设置所有内容。

需要一些javascript来执行此操作，这可以通过更改新页面上的元素进行打印，但这不是什么大问题。

然后你可以拥有你想要的格式的多个div，以及所有东西的位置。

另一种选择是让他们点击一个将页面转换为pdf的打印按钮。根据您在服务器端的内容，有几个选项。

Answer 2

尝试使用相对定位的div，它将包含一个文本区域以及绝对定位的另一个div。

<div id="outer" style="position: relative">
    <textarea id="txtArea" style="text-decoration: underline;"></textarea>
    <div style="position: absolute; left: 5px; top: 5px;">Comments:</div>
</div>

你需要设置textarea的样式以获得你想要的效果。

Answer 3

我很确定单独使用HTML和CSS是不可能的（假设您希望某人能够在这两行上输入文本）。唯一的多行输入是textarea，它必须是正方形。

您可以使用一些javascript技巧，使用TinyMCE样式编辑框，并使用javascript强制文本“Comments：”保持在开头，然后让它自动为文本加下划线输入它，模仿外观。

Answer 4

难道你不能只在你需要的文本框上放置一个背景图片（'comments：'和下划线）然后只做一个：

text-indent:5em; /* or whatever works... */

元素上的

？人们将打印设置设置为不允许背景图像可能存在问题。我不确定这是不是一个问题。此外，我不确定文本缩进是否适用于IE - 我目前在Mac上，它适用于FF和Safari。

编辑：它在IE7和IE8中有效。

Answer 5

没有简单的方法，但您可以尝试将标签放置在文本字段的顶部，并为文本字段提供文本缩进。或者通过JavaScript为它提供默认值。

最简单的方法是需要JavaScript或CSS“：before”伪选择器，这两种方法都不是跨浏览器的完美。