JavaScript打印页面时如何隐藏textbox仅显示输入文本？

我来帮你解决这个打印时文本框（textbox）影响UI的问题！其实核心思路就是让打印的时候只显示输入的内容，而不显示文本框本身，这里有两种实用的方案：

方案一：用CSS媒体查询（推荐，无JS操作更简洁） #

这种方法不需要修改JS逻辑，只通过打印专属的样式来控制显示：

1. 给你的文本框搭配一个隐藏的<span>标签，用来同步存放输入的内容：

<input type="text" id="myInput" oninput="document.getElementById('inputText').textContent = this.value">
<span id="inputText" style="display: none;"></span>

2. 添加打印媒体查询，在打印时隐藏文本框，显示对应的span：

@media print {
  #myInput {
    display: none;
  }
  #inputText {
    display: inline;
    /* 可根据需求调整样式，比如和原文本框匹配的字体、大小 */
    font-family: sans-serif;
    font-size: 1rem;
  }
}

用户输入内容时，span会同步更新，打印时就只会显示纯文本，不会有文本框的边框和默认样式了。

方案二：打印前动态替换元素，打印后恢复 #

如果需要更灵活的JS控制，可以在打印前把文本框替换成纯文本节点，打印完成后再还原：

function printPage() {
  const input = document.getElementById('myInput');
  const originalElement = input.cloneNode(true); // 先保存原元素的副本
  const textNode = document.createTextNode(input.value); // 创建纯文本节点

  // 把文本框替换成纯文本
  input.parentNode.replaceChild(textNode, input);

  // 执行打印操作
  window.print();

  // 打印完成后还原原文本框（用setTimeout等待打印对话框关闭）
  setTimeout(() => {
    textNode.parentNode.replaceChild(originalElement, textNode);
  }, 100);
}

调用这个printPage()函数触发打印即可，这种方式适合需要临时修改内容或样式的场景。

额外小技巧 #

如果不想额外添加元素，也可以直接用CSS让文本框在打印时“伪装”成纯文本：

@media print {
  input[type="text"] {
    border: none;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
  }
}

这种方法最简单，但如果文本框有特殊样式（比如圆角、阴影），前两种方案的效果会更彻底。

内容的提问来源于stack exchange，提问作者sathish kumar