2013-05-11 5 views
14

के प्रिंट करने योग्य संस्करण पर इनपुट प्लेसहोल्डर को हटाकर मेरे पास इनपुट फ़ील्ड के साथ एक फॉर्म है। प्रत्येक इनपुट फ़ील्ड में प्लेसहोल्डर विशेषता होती है। एक ही फॉर्म के प्रिंट करने योग्य संस्करण को प्रदर्शित करने वाला एक लिंक भी है।एचटीएमएल पेज

मेरी समस्या यह है कि यदि मैं प्लेसहोल्डर विशेषता को अपरिवर्तित छोड़ देता हूं और इनपुट फ़ील्ड खाली होता है, तो प्लेसहोल्डर वास्तव में मुद्रित होता है, जो बहुत अच्छा नहीं होता है।

मैं इस दुर्भाग्यपूर्ण व्यवहार को हल करने का एक तरीका ढूंढ रहा हूं। अभी, केवल एक चीज जिसे मैं सोच सकता हूं वह जावास्क्रिप्ट में डीओएम को पार करता है और प्रिंट करने योग्य संस्करण दिए जाने पर सभी प्लेसहोल्डर विशेषताओं को हटा देता है। बेशक, जब सामान्य पृष्ठ दृश्य पर वापस लौटते हैं, तो प्लेसहोल्डर विशेषताओं को भी पुनर्स्थापित किया जाना चाहिए।

यह कठिन नहीं है, लेकिन यह भी बहुत ही सुरुचिपूर्ण नहीं है। मुझे आश्चर्य है कि कोई बेहतर समाधान है या नहीं।

उत्तर

17

अधिकांश आधुनिक ब्राउज़रों में, आप कुछ गैर मानक सीएसएस चयनकर्ताओं के माध्यम से प्रिंटिंग करते समय प्लेसहोल्डर्स को छिपाने में सक्षम होना चाहिए।

@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; 
    } 
} 

(या color: white, आदि)

चयनकर्ता सूची से चोरी: Change an HTML5 input's placeholder color with CSS

+0

2 और 3 के बीच क्या अंतर है? – mark

+0

2: एक छद्म चयनकर्ता। 3: एक छद्म तत्व। 2 अन्य तत्वों (ए: -मोज़-प्लेसहोल्डर) पर लागू किया जा सकता है, 3 नहीं कर सकते हैं। यदि आप एफएफ 4 और ऊपर का समर्थन करना चाहते हैं तो आप दोनों चाहते हैं। –

+0

कैसे गाय। यह काम करता हैं। – mark

1

या आप पाठ इंडेंट या कुछ अन्य overflowy हैक द्वारा पेरेंट तत्व के दृश्य क्षेत्र के बाहर ले जा सकते हैं

संबंधित मुद्दे