html - 样式 html 文本输入大小以匹配其内容

Question

我问了几个other questions这里是关于这个系统的，所以我会尽量避免重复很多细节。

简短的版本是我有很多 html 页面，每个页面都有一个接受输入的表单，但从不将输入保存在任何地方——它们只打印出来用于邮寄。一位以前从未听说过 @media print 的开发人员完成了其中大部分的初始工作，因此他想出了一些...奇怪的解决方案来隐藏丑陋的东西打印页面上的文本框，通常会导致几乎相同的 html 的两个完全独立的副本。不幸的是，这在很多情况下破坏了后退按钮，所以现在我必须返回并修复它们。

---

在某些情况下，这些 html 表单实际上是格式字母，在文本中间有文本输入。我可以设置文本输入的样式，使框不显示，但它们的大小仍然错误。这会导致一堆不属于它的额外丑陋的空白。如何使输入适合用户输入的文本？

目前我能想到的最好办法是在每个输入旁边有一个隐藏的 ，它被设计为在打印时显示而不是输入，并使用 javascript 保持同步。但这很丑陋。我正在寻找更好的东西。

更新:
我们的大多数用户仍在使用 IE6，但我们也有一些 IE7 和 Firefox。

更新2:
我重新考虑了一下使用标签而不是跨度。我将使用标签的 for 属性维护这种关系。参见 this question对于我的最终代码。

Answer 1

跨度的想法还不错。使用像 jquery 这样的 Javascript 库, 单个 1-2 行 Javascript 函数可以动态替换所有适当的 <input>带有 <span>..</span> 的标签.您不必自己输入任何跨度。

在带有 jquery 的非常粗糙的伪 javascript 代码中，它会是这样的:

function replaceInputsOnSomeButtonClick() {
 // Find all inputs, wrap value with span tag, remove the input tag
 $("input").text().wrap("<span>").remove();
}