2

我在这里问了一些关于这个系统的其他问题，所以我会尽量避免重复很多细节。

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

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

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

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

Update2：
我重新考虑了一下使用标签而不是跨度。我将使用标签的for属性来维护这种关系。请参阅此问题以获取我的最终代码。

4

2 回答 2

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();
}
于 2008-11-12T21:25:52.497 回答
1

CSS对此没有答案。输入是“被替换的元素”——CSS 中的一个黑盒子。

input {content:attr(value)}仅适用于 HTML 中的初始值，不会反映任何以后的更改。

所以你能得到的最好的就是不那么丑陋的 Javascript。

for(var i=0; i < form.elements.length; i++)
{
   var input = form.elements[i]; 
   if (input.type != 'text') continue;

   var span = document.createElement('span');
   input.parentNode.insertBefore(span,input);

   span.className = 'show-in-print';
   input.className = 'hide-in-print';

   input.onchange = (function(span){ // trick to preserve current value of span
      return function()
      {
         if (span.firstChild) span.removeChild(span.firstChild);
         span.appendChild(document.createTextNode(this.value));
      }
   })(span);
}
于 2008-11-12T23:42:05.717 回答