5

入力フィールドのあるページがあります。ページがメディアタイプの印刷の場合、すべての0値のテキストフィールドを非表示にします。

私はjQueryで試しました。ただし、これは画面モードと印刷モデルの両方で機能します。

HTML：

<div class="screen">some screen</div>
<div class="print">some print</div>
<input type='text' name='' id='1' class='' value='0'/>
<input type='text' name='' id='2' class='' value='5'/>
<button>Print</button>

JS：

$('button').click(function(){
    $('input[type=text]').each(function(){
      if ( $(this).val() == 0 ){
        $(this).hide()
      }     
    })
})

CSS：

@media print{
    .screen{
      display:none;
    }

    .print{
      display:block;  
    }
}

@media screen{
    .screen{
      display:block        
    }

    .print{
      display:none;   
    }
}

現在のページのメディアタイプを検出した場合。私はそれを終えることができます。残念ながら、正しいコードを取得できませんでした。

jmediatypeも試しましたが、ダウンロードオプションがありません。

4

3 に答える 3

4

でフィールドを非表示にするだけの場合はvalue="0"、CSS だけでこれを行うことができます。

@media print {
    input[value="0"] {
        display: none;
    }
}

別の方法は、これらの要素に、印刷スタイルシートによってのみ隠されるクラスを与えることです。

$('button').click(function(){
    $('input[type=text]').filter(function() {
        return parseInt(this.value, 10) == 0;
    }).addClass('print-hidden');
});

そして、次のようなスタイルを使用します。

@media print {
    .print-hidden {
        display: none;
    }
}
于 2012-10-19T03:10:24.970 に答える
1

以下を含むメディア印刷専用のCSSファイルを定義します。

.empty
{
    display: none;
}

メディア印刷の場合のみ、このCSSファイルをメイジに含めます

クリックイベントのボタンにリスナーを追加します。このリスナーは、空の値を持つ入力用に空のCSSクラスを追加します。

$("ID_OF_YOUR_BUTTON").click(function(mouseEvent) {

    $("input[type=text]").each(function(index, element) {

        if ($(element).val().length == 0)
            $(element).addClass("empty");

    });
});

メディア画面の場合、このクラスは何もしませんが、メディア印刷の場合、表示をnoneに変更します。

于 2012-10-19T03:15:35.883 に答える
1

特定のスタイルシートのメディアタイプを知りたい場合は、jQueryでこれを行うことができます。

var media = $('link[href$="styles.css"]').attr('media');

1つのファイルでメディアクエリを使用する代わりに、スタイルシートを分離して、メディア属性を使用してマークアップにロードする必要があります。

于 2012-10-19T03:15:50.450 に答える