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

admin管理员组

文章数量:1404340

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?

• javascript
• html
• css
• printing
• media

Share Improve this question Follow edited Sep 29, 2012 at 16:08 Daniel Li 15.4k66 gold badges4444 silver badges6060 bronze badges asked Sep 28, 2012 at 19:35 Lefteris LivanosLefteris Livanos 10111 silver badge99 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

Sorted by: 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.

本文标签： javascriptHow can I hide my inputs when printing my webpageStack Overflow