代码之家 › 专栏 › 技术社区 › Joel Coehoorn

如何让多行输入或文本区域包装?

css html

Joel Coehoorn · 技术社区 · 16 年前

我正在尝试在HTML中实现打印时与此完全相同的布局:

Comments: _____________________________________________
_______________________________________________________

…其中带下划线的部分是某种类型的单个输入标记-意味着只要用户可以输入文本并打印出来,它也可以是文本区域或其他内容。

要求:

“ Comments “文本” 必须与输入文本的第一行位于同一行
我不能把“注释”这个词放在文本区域内。
我不能使用多个文本输入
打印时两行输入都应加下划线
我不能指望在打印前提交页面:我几乎已经完成了客户端的所有工作。

原因是,当从浏览器打印页面时,我必须从外部公司可视化地重新创建一个纸质文档,以便与之完全匹配。这是一个内部“表单”系统的一部分,该系统会预先向我介绍这家公司的情况。它的设置使这些表单在浏览器中自动调整页边距和页眉,所以这不是问题。以我需要的方式格式化此HTML 是 .

5 回复 | 直到 16 年前

Kirtan 16 年前

尝试使用相对定位的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>

您必须对文本区域设置一点样式,以获得所需的效果。

James Black 16 年前

您可能希望有一个单独的样式表用于打印,当它们开始打印时,会丢失文本区域,并为打印显示设置所有内容。

需要一些JavaScript来完成这项工作,它可以在新页面上运行更改的元素以进行打印,但这并不是什么大问题。

然后,您可以有多个具有您想要的格式的div,以及所有内容的位置。

另一种选择是让他们点击一个打印按钮,将页面转换为PDF格式。根据服务器端的情况,有几个选项。

Chad Birch 16 年前

我相当肯定,仅HTML和CSS是不可能做到这一点的(假设您希望有人能够在这两行上输入文本)。唯一的多行输入是一个文本区域,它必须是一个正方形。

你也许可以用一些javascript的小技巧来完成它,有一个 TinyMCE -样式编辑器框,并使用javascript强制文本“comments:”停留在开头,然后在文本输入时自动为其加下划线,以模拟外观。

KyleFarris 16 年前

你不能把一个背景图像放在有你需要的文本框上(注释和下划线),然后做一个:

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

关于元素?将打印设置设置为不允许背景图像的人可能有问题。我不确定这是否是个问题。另外,我不确定文本缩进在IE中是否有效——我现在在Mac上,它与FF和Safari一起工作。

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

Alan Plum 16 年前

这不是一个简单的方法,但是您可以尝试绝对定位标签,使其出现在文本字段的顶部,并给文本字段一个文本缩进。或者通过javascript给它一个默认值。

最简单的方法是需要javascript或者CSS:在“伪选择器”之前,这两种方法都不是跨浏览器的完美方法。