एक इनपुट पाठ फ़ॉर्म में div कैसे बनाएं?

Question

पाठ फ़ॉर्म के इनपुट के रूप में टेक्स्टरेरा और इनपुट-टेक्स्ट का उपयोग करके कुछ कमियां हैं। टेक्स्टरेरा में दाएं कोने में थोड़ा कष्टप्रद त्रिकोण है और इनपुट-टेक्स्ट एक सिंगल-लाइन इनपुट है।

मैं फेसबुक अपडेट इनपुट फॉर्म जैसे टेक्स्ट का इनपुट करने का प्रयास करता हूं। लाइनब्रेक्स के बाद इनपुट ऑटो आकार बदलें। और इस्तेमाल किया गया तत्व या टैग <div> था। मैंने कहा "इस्तेमाल किया" क्योंकि, फेसबुक को फिर से डिजाइन करने के बाद, मैं यह नहीं समझ सकता कि अब कौन सा टैग उपयोग किया जाता है। सीएसएस संपत्ति है जो उपयोगकर्ता को div तत्व में पाठ को संपादित करने में सक्षम बनाता है। मैंने वास्तव में सीएसएस संपत्ति की प्रतिलिपि बनाई, लेकिन अब मैंने इसे खो दिया। क्या कोई मुझे बता सकता है कि यह कौन सी सीएसएस संपत्ति थी? मैं एक कमजोर स्मृति है कि यह -webkit उपसर्ग हालांकि

Answer 1

में किया जा होगा आप html5 का उपयोग करते हैं आप उपयोग कर सकते हैं:

<div id="divThatYouCanWriteStuffIn" contenteditable> 
<!-- you can write in here --> 
</div> 

यदि आप सीएसएस के साथ इस जोड़ी:

#divThatYouCanWriteStuffIn { 
    min-height: 4em; /* it should resize as required from this minimum height */ 
} 

में 'कष्टप्रद छोटे त्रिकोण' से छुटकारा पाने केरों:

textarea { 
    resize: none; 
} 

JS Fiddle demo of both ideas।

Answer 2

मुझे पता है तुम getElementByID('mydiv').contentEditable='true'; करके जावास्क्रिप्ट में यह कर सकते हैं के साथ शुरू हुआ है, लेकिन मैं नहीं जानता कि यह कैसे सीएसएस

Answer 3

फेसबुक अपडेट इनपुट फ़ील्ड एक टेक्स्टटेरा तत्व है।

textarea { resize:none; } 

त्रिकोण कर देगा कि गायब हो जाते हैं: चाल resize संपत्ति का प्रयोग है।

Answer 4

आप एक पाठ क्षेत्र के लिए अपनी शैली को जोड़ने के लिए की तरह आप पी, H1, H2 आदि की तरह टैग के साथ क्या सक्षम होना चाहिए ..

तो आप उन पर विशिष्ट वर्गों या आईडी के साथ सभी textareas या को लक्ष्य कर सकते

उदाहरण:

textarea { 
    font-size:11px; 
    font-family:Verdana, Arial, Helvetica, sans-serif; 
    font-weight:normal; 
    line-height:140%; 
    color:black; 
    margin:0 0 5px 5px; 
    padding:5px; 
    background-color:#999999; 
    border:1px solid black; 
} 

यह उदाहरण पृष्ठ पर सभी textareas को लक्षित करेंगे। यदि आप किसी वर्ग या आईडी को लक्षित करना चाहते हैं तो .nameOfClass या #nameOfId पर textarea बदलें।

उम्मीद है कि इससे मदद मिलती है।