最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How can I hide my inputs when printing my webpage? - Stack Overflow

programmeradmin2浏览0评论

I am using the script below:

<script>
function printpage()
{
window.print()
}
</script

To call it after with this:

<input type="button" value="Print this page" onclick="printpage()" />

But I don't know how to insert in the script this:

$('input' )
.hide();

Meaning that all the input from the print area is hidden.

Any ideas?

I am using the script below:

<script>
function printpage()
{
window.print()
}
</script

To call it after with this:

<input type="button" value="Print this page" onclick="printpage()" />

But I don't know how to insert in the script this:

$('input' )
.hide();

Meaning that all the input from the print area is hidden.

Any ideas?

Share Improve this question edited Sep 29, 2012 at 16:08 Daniel Li 15.4k6 gold badges44 silver badges60 bronze badges asked Sep 28, 2012 at 19:35 Lefteris LivanosLefteris Livanos 1011 silver badge9 bronze badges 4
  • You need a '.' infront of the input to get all input classes using jquery. – C0D3 Commented Sep 28, 2012 at 19:37
  • function printpage(){ $('input' ).hide(); window.print(); } – Jashwant Commented Sep 28, 2012 at 19:38
  • not working , now i cant print – Lefteris Livanos Commented Sep 28, 2012 at 19:49
  • 1 @c0d3Junk13 Using $("input") gets all <input> elements...Their input element doesn't have a class anyways – Ian Commented Sep 28, 2012 at 19:51
Add a ment  | 

2 Answers 2

Reset to default 12

You can solve this using CSS by specifying the media type as print:

  <style type="text/css" media="print">
/*<![CDATA[*/
    input{
        display:none;
    }
  /*]]>*/
  </style>

Use @Media CSS rule:

@media print {
  input {visibility:hidden;}
}

or

@media print {
  input {display:none;}
}

The choice between these options depends on your page flow: display:none removes the input pletely, while visibility:hidden simply hides it, but it still occupies its place.

You don't need to hide it in JavaScript.

发布评论

评论列表(0)

  1. 暂无评论