21

某些 HTML 表单元素附加了额外的 UI，例如number. 但是，在打印页面时，不再需要这些按钮，因为用户无法以打印形式与它们进行交互。

文本框很容易处理：

@media print {
    input {
        border: none;
        border-bottom: 2px solid #000000;
    }
}

使它们打印得非常好，就像一条带有文本的行。就像一个人会用手填写的表格一样。然而，对输入做同样的事情number会给你留下那些讨厌的向上/向下箭头：

HTML <输入类型=

然后还有更没用的打印输出，例如range，在页面上时没有任何意义：

HTML <输入类型=

有没有办法解决这个问题？有什么方法可以将元素的那部分设置为不可见，但仍然可以看到值/文本？

我意识到可以type=""用 JS 替换属性，或者让另一个元素保存要在打印上显示的值，但是如果有一个只能用 CSS 完成的解决方案，那就更好了。

4

6 回答 6

3

您可以尝试使用CSS 选择器隐藏特定元素

@media print {
    input[type=range] {
        display: none;
    }
}

但是，要隐藏元素中的箭头number，也许您可​​以尝试放置 2 个元素， 1text和 1 number，然后number在屏幕模式下显示 when ，而在text隐藏模式下，反之亦然

@media print {
    input[type=text] {
        display: inline-block;
        border:none;
        border-bottom:2px solid #000;
        etc..
    }
    input[type=number] {
        display: none;
    }
}
@media screen {
    input[type=number] {
        display: inline-block;
    }
    input[type=text] {
        display: none;
    }
}

可以对其他表单元素执行类似的操作。如果您可以使用此方法，这将取决于您的实现。

于 2013-05-06T21:56:17.140 回答
2

在 webkit 浏览器中可以实现这种效果。我仍然找不到在其他人中做到这一点的方法，但它适用于 webkit。

@media print {
    input::-webkit-outer-spin-button,  
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Webkit 实际上将这些按钮视为伪元素（有充分的理由）并提供了一种隐藏它们的方法。这正是人们想要的那种行为，尽管仅限于 webkit 有点烦人。

于 2013-05-11T17:11:37.557 回答
2

output更好的解决方案是使用element，因为它不使用供应商前缀。

原则

  1. 隐藏output元素@media screen；
  2. 更新output字段输入元素的值；
  3. 切换input和output元素的可见性@media print。

→此处提供 codepen。

HTML

<form onsubmit="return false" oninput="print.value = parseInt(screen.value)">
  <input class='screen' name="screen" type="number" value='0'> →
  <output class='print' name="print">5 (default print value)</output>
</form>
<p>The <code>output</code> element replace the <code>input</code> on print media</p>

CSS

.print {
  display: none;
}

@media print {
  .screen {
    display: none;
  }
  .print {
    display: inline-block;
  }
}
于 2015-06-30T10:17:57.647 回答
1

尝试在屏幕上使用隐藏测试，然后在打印上显示

@media print {
    .hideOnprint {
        display: none;
    }
    .hideOnScreen {
        display: block;
    }
}
@media screen {
    .hideOnprint {
        display: block;
    }
    .hideOnScreen {
        display: none;
    }
}

用类影响文本和用类影响hideOnScreen 输入hideOnPrint

于 2013-05-06T10:08:11.353 回答
0

另一种方法是提供一个打印链接，并拥有另一个页面副本，而不需要所有额外的东西

ie:        www.something.com/page.htm
printpage  www.something.com/page-print.htm

这是最常见的做法（此外，您可以在其中重复使用仅打印部分的 css）

希望有帮助

于 2013-05-06T19:30:26.500 回答
0

也许您应该使用简单的 javascript 来仅获取相关字段的值，在打印操作时，更改为可打印格式，执行打印并将其更改回正常状态？

真的不知道仅使用 CSS 是否可行。

您可能要考虑使用 XML 解析机制。对于此类任务，这是一种非常方便的方法。

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

于 2013-05-06T03:56:20.893 回答