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');

您必须分离样式表并使用 media 属性将它们加载到标记中，而不是在一个文件中使用媒体查询。

于 2012-10-19T03:15:50.450 回答