हो सकता है कि आपको contenteditable विशेषता का पता चला हो। इसका प्रयोग कई जगहों पर किया जाता है. यह टेक्स्टएरिया जैसी किसी चीज़ का एक बेहतर विकल्प है। आप किसी भी div में contenteditable='true' जोड़ सकते हैं और फिर यह एक इनपुट फ़ील्ड की तरह कार्य करता है। इस लेख में, मैं आपको दिखाऊंगा कि टेक्स्ट में प्लेसहोल्डर कैसे जोड़ा जाए क्योंकि यह बॉक्स के ठीक बाहर प्लेसहोल्डर विशेषता का समर्थन नहीं करता है।

कोड की आवश्यकता है

div[contenteditable] {
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

आपको बस इतना ही कोड चाहिए! हालाँकि, यदि आप उसे केवल CSS में जोड़ते हैं तो यह काम नहीं करेगा। आपको अपने HTML में एक प्लेसहोल्डर विशेषता जोड़नी होगी और यह भी सुनिश्चित करना होगा कि div दृश्यमान हो।

पूर्ण कोड/उदाहरण

एचटीएमएल

सीएसएस

div[contenteditable] {
  /* Basic styles */
  width: 20rem;
  height: 15rem;
  padding: 1rem;
  background: #292929;
  color: #fff;

  /* Placeholder code */
  &[placeholder]:empty::before {
    content: attr(placeholder);
    z-index: 9;
    line-height: 1.7;
    color: #555;
    word-break: break-all;
    user-select: none;
  }

  &[placeholder]:empty:focus::before {
    content: "";
  }
}

इसके लिए यही सब कुछ है। उम्मीद है यह आपको उपयोगी होगा!