2

このシステムについては他にもいくつか質問したので、詳細を繰り返さないようにします。

短いバージョンは、多くの html ページがあり、それぞれに入力を受け入れるフォームがありますが、入力をどこにも保存することはありません。それらは郵送用にのみ印刷されます。聞いたことのない以前の開発者が@media printそれらのほとんどの最初の作業を行ったので、彼はいくつかの...印刷されたページの醜いテキスト ボックスを非表示にする奇妙な解決策を思いつきました。同じhtml. 残念ながら、多くの場合、戻るボタンが壊れてしまったので、戻って修正する必要があります。

場合によっては、これらの html フォームは実際にはフォーム レターであり、テキスト入力はテキストの中央にあります。ボックスが表示されないようにテキスト入力のスタイルを設定できますが、それでもサイズが正しくありません。これにより、属していない余分な醜い空白がたくさんできます。ユーザーが入力したテキストに入力を合わせるにはどうすればよいですか?

現時点で思いつく最善の方法は、印刷時に入力の代わりに表示するようにスタイル設定された各入力の横に非表示の <span> を配置し、javascript を使用して同期を維持することです。しかし、これは醜いです。もっと良いものを探しています。

更新:
ほとんどのユーザーはまだ IE6 を使用していますが、一部の IE7 と firefox も使用しています。

Update2:
スパンではなくラベルを使用するように少し考え直しました。ラベルのfor属性を使用して関係を維持します。最終的なコードについては、この質問を参照してください。

4

2 に答える 2

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 に答える
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 に答える