javascript - 使用 JavaScript 隐藏打印 View 中的空字段

Question

我有一个需要打印的表格。但是，可能会有一些字段留空，我希望它们完全从我的打印 View 中排除。我说的是 JavaScript window.print(); 函数和它打开的打印窗口。

有什么办法可以做这样的事情吗？有没有办法让我处理此类事件中的逻辑(即打印前？)。

Answer 1

您可以结合使用 CSS @media 和一些 javascript 来根据字段是否为空来更改类。像这样的……

var fields = document.getElementsByClassName("field");
for(var i=0; i < fields.length; i++){
    fields[i].addEventListener('keyup', function() {
    	if(this.value.length) {
    	    this.parentElement.className = "";
    	} else {
    	 	this.parentElement.className = "empty";   
    	}
    });
}

@media print {
    .empty {
        display: none;
    }
}

<div class="empty">Name: <input class="field"></div>
<div class="empty">Field: <input class="field"></div>
<div class="empty">Foo: <input class="field"></div>

(在代码片段中，向字段中添加一些内容但不是全部，然后按 ctrl+p。您不会在打印预览中看到空白字段)

如果使用 jQuery，你可以清理选择器并循环使 js 像这样

$(".field").on("keyup", function () {
    $this = $(this);
    if ($this.val().length) {
        $this.parent().removeClass("empty");
    } else {
        $this.parent().addClass("empty");
    }
});