एक इनपुट तत्व के अंदर छिपाने वाला पाठ

Question

मेरे पास एक टेक्स्ट इनपुट है, और मैं किसी दिए गए ईवेंट पर टेक्स्ट को छिपाना चाहता हूं (जब इनपुट की आवश्यकता नहीं होती है, तो मैं इनपुट को अक्षम करता हूं)। जब दिया गया ईवेंट उलट दिया जाता है, तो मैं छुपा पाठ प्रदर्शित करना चाहता हूं।

मुझे पता है कि मैं मूल्य को स्टोर कर सकता हूं और आवश्यकतानुसार पुनर्प्राप्त कर सकता हूं। मैं चलती डेटा से बचना चाहता हूं, क्योंकि यह पूरी तरह से कॉस्मेटिक ऑपरेशन है।

क्या इनपुट टेक्स्ट छुपाया जा सकता है, या इनपुट में डेटा को एकमात्र तरीके से जोड़ना है? मुझे सबसे सरल समाधान चाहिए।

मैं शुद्ध जेएस और jQuery का उपयोग कर सकता हूं।

Answer 1

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

var input = document.querySelector('input'); 
 

 
function hide() { 
 
    input.value = ""; 
 
} 
 

 
function show() { 
 
    input.value = input.getAttribute('value'); 
 
}

<input type="text" value="Some text"> 
 
<button onclick="hide()">Hide</button> 
 
<button onclick="show()">Show</button>

Answer 2

तत्व के डेटासेट के अंदर इनपुट तत्व के मान को संग्रहीत करने के तरीके पर एक उदाहरण।

और इसे होवर पर दिखाएं/छुपाएं।

var hello = document.getElementById('hello'); 
 
hello.dataset.value = hello.value; 
 
hello.value = ''; 
 
hello.addEventListener('mouseover', function() { 
 
    hello.value = hello.dataset.value; 
 
}); 
 
hello.addEventListener('mouseout', function() { 
 
    hello.value = ''; 
 
});

<input id="hello" value="Hello World" />