风格的HTML文字输入大小以匹配其内容

我在这里询问了几个other questions关于这个系统，所以我会尽量避免重复很多细节。风格的HTML文字输入大小以匹配其内容

简短的版本是我有很多html页面，每个页面都有一个接受输入的表单，但是从不保存任何输入 - 他们只会被打印出来用于邮寄。一位以前从未听说过@media print的开发者对他们中的大多数人做了初步工作，所以他想出了一些...... odd解决方案可以隐藏打印页面上难看的文本框，通常会生成两个完全分离的副本几乎相同的HTML。不幸的是，在很多情况下，这打破了后退按钮，所以现在我必须回去修复它们。

在某些情况下，这些HTML形式真的是套用信函，在文本中间的文本输入。我可以对文本输入进行样式设置，以使该框不显示，但仍然是错误的大小。这会导致一堆不属于它的额外的丑陋空白。如何使输入符合用户输入的文字？

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

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

UPDATE2：
我重新想这一点使用一个标签，而不是一个跨度。我将使用标签的for属性维护关系。我的最终代码见this question。

来源

2008-11-12 Joel Coehoorn

我假设你已经对初学者设置填充和边距属性为0的裂缝？ – 2008-11-12 21:25:14

跨度的想法并没有那么糟糕。使用类似jquery的Javascript库，单个1-2行Javascript功能可以动态替换所有<input>标签和<span>..</span>。你不必自己输入任何跨度。

在真正粗糙的伪JavaScript代码与jQuery它会是这样的：

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

来源

2008-11-12 21:25:52 Josh

我也需要它是可逆的，但是这给了我一个更好的主意：我可以使用每个元素的name属性来进行切换。现在的问题是，它要求他们在打印时手动运行我的代码 - 他们将无法使用浏览器中的打印按钮。 – 2008-11-12 21:30:45

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-12 23:42:05 Kornel

风格的HTML文字输入大小以匹配其内容

回答

相关问题