सफ़ारी में टेक्सचर को छुपाने से टेक्सएरिया को हैंडल किया जाता है


97

मैं अपने आवेदन में textarea घटकों का उपयोग कर रहा हूं, और मैं गतिशील रूप से उनकी ऊंचाई को नियंत्रित करता हूं। उपयोगकर्ता के रूप में, जब भी पर्याप्त पाठ होता है तो ऊंचाई बढ़ जाती है। यह IE, फ़ायरफ़ॉक्स और सफारी पर ठीक काम करता है।

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

तो, वहाँ वैसे भी इस आकार संभाल छिपाने के लिए है?

(मुझे यकीन नहीं है कि "हैंडल" सही शब्द है, लेकिन मैं एक बेहतर शब्द के बारे में नहीं सोच सकता।)

जवाबों:


177

आप सीएसएस के साथ व्यवहार को ओवरराइड कर सकते हैं:

textarea
{
   resize: none;
}

या बस

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

मान्य गुण हैं: दोनों, क्षैतिज, ऊर्ध्वाधर, कोई नहीं


22
यहां कड़ाई से प्रासंगिक नहीं है, लेकिन सफारी भी सक्षम आकार को छोड़ने के लिए न्यूनतम-ऊंचाई, अधिकतम-ऊंचाई, न्यूनतम-चौड़ाई, और अधिकतम-चौड़ाई सीएसएस गुणों का सम्मान करती है, लेकिन यह कितनी दूरी पर आकार बदल सकती है, इसकी सीमा निर्धारित करती है।
स्टीवेमेगसन

1
धन्यवाद! यह वही सवाल पूछने के बारे में था :)
एलेक्स

क्या होगा अगर मैं आकार बदलने के बाद इसे हॉवर पर दिखाना चाहता हूँ: कोई नहीं?
माइकल फॉरेस्ट

@ मिचेल फॉरेस्ट: क्या आपने टेक्सारिया की कोशिश की है: होवर {रिसाइज: विरासत! महत्वपूर्ण! }? मैंने कभी इसकी कोशिश नहीं की, बस एक अनुमान है।
तमसा सीजेन

7
एक चेतावनी: उपयोगकर्ता को आकार बदलने की अनुमति नहीं <textarea>देना एक प्रयोज्य मुद्दा हो सकता है। सेटिंग resize:vertical;अक्सर एक बेहतर विकल्प होता है। यह आपके लेआउट को गड़बड़ नहीं करना चाहिए, और यह उपयोगकर्ता को नियंत्रण की अधिक समझ देता है।
Web_Designer

2

सभी TextAreaतत्वों के लिए इस व्यवहार को अक्षम करने के लिए निम्नलिखित सीएसएस नियम का उपयोग करें :

textarea {
    resize: none;
}

यदि आप इसे कुछ (लेकिन सभी नहीं) TextAreaतत्वों के लिए अक्षम करना चाहते हैं, तो आपके पास कुछ विकल्प हैं ( इस पृष्ठ के लिए धन्यवाद )।

(यानी, ) के लिए सेट विशेषता के TextAreaसाथ एक विशिष्ट को निष्क्रिय करने के लिए :namefoo<TextArea name="foo"></TextArea>

textarea[name=foo] {
    resize: none;
}

या, एक आईडी (यानी, <TextArea id="foo"></TextArea>) का उपयोग कर :

#foo {
    resize: none;
}

ध्यान दें कि यह केवल WebKit- आधारित ब्राउज़र (यानी, सफारी और क्रोम) के लिए प्रासंगिक है, जो TextAreaनियंत्रण के लिए आकार परिवर्तन हैंडल को जोड़ता है ।


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.