Xóa trình giữ chỗ đầu vào trên phiên bản có thể in của trang html

Question

Tôi có biểu mẫu có các trường nhập. Mỗi trường nhập có một thuộc tính giữ chỗ. Ngoài ra còn có một liên kết hiển thị phiên bản có thể in của cùng một biểu mẫu.

Vấn đề của tôi là nếu tôi để nguyên thuộc tính giữ chỗ và trường nhập trống, thì trình giữ chỗ thực sự được in, điều này không thực sự tốt.

Tôi đang tìm cách giải quyết hành vi không may này. Ngay bây giờ, điều duy nhất tôi có thể nghĩ đến là đi qua DOM trong javascript và loại bỏ tất cả các thuộc tính giữ chỗ khi phiên bản in được đưa ra. Tất nhiên, khi quay trở lại chế độ xem trang bình thường, các thuộc tính giữ chỗ cũng phải được khôi phục.

Đây không phải là khó, nhưng cũng không phải là rất thanh lịch. Tôi tự hỏi nếu có một giải pháp tốt hơn.

Answer 1

Trong hầu hết các trình duyệt hiện đại, bạn sẽ có thể ẩn trình giữ chỗ khi in, qua một số bộ chọn CSS không chuẩn.

@media print { 
    ::-webkit-input-placeholder { /* WebKit browsers */ 
     color: transparent; 
    } 
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
     color: transparent; 
    } 
    ::-moz-placeholder { /* Mozilla Firefox 19+ */ 
     color: transparent; 
    } 
    :-ms-input-placeholder { /* Internet Explorer 10+ */ 
     color: transparent; 
    } 
} 

(hoặc color: white, vv) danh sách

Selector bị đánh cắp từ: Change an HTML5 input's placeholder color with CSS

Answer 2

hoặc bạn có thể di chuyển nó bên ngoài vùng hiển thị của phần tử cha mẹ bằng text-indent hoặc một số hack overflowy khác