मैं एक textarea की resizable संपत्ति को कैसे निष्क्रिय करूं?

2648

मैं एक के प्राप्य संपत्ति को निष्क्रिय करना चाहता हूं textarea।

वर्तमान में, मैं माउस textareaके नीचे और दाएं कोने पर क्लिक करके आकार बदल सकता हूं textarea। मैं इसे कैसे निष्क्रिय कर सकता हूं?

html css

— user549757
स्रोत

4

@JDIsaaks - आगे, कुछ स्थितियों में आकार बदलने की अनुमति लेआउट और प्रिंटबिलिटी (वर्तमान मिशन-महत्वपूर्ण परियोजना का एक महत्वपूर्ण पहलू) को तोड़ सकती है।

— random_user_name

10

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

— निनीम

2

सभी के प्यार के लिए यह अच्छा है, कृपया इसे एक वास्तविक टेक्स्टारिया पर न करें या आप अपने पावर उपयोगकर्ताओं को अलग कर देंगे। ब्रेकिंग कोर ब्राउज़र कार्यक्षमता को परमाणु विकल्प माना जाना चाहिए।

— superluminary

3530

निम्नलिखित सीएसएस नियम textareaतत्वों के लिए व्यवहार का आकार बदलने में अक्षम करता है :

textarea {
  resize: none;
}

कुछ के लिए यह निष्क्रिय करने के लिए (लेकिन सभी नहीं) textareaहै, वहाँ एक हैं विकल्पों में से जोड़ी ।

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

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

या, एक idविशेषता का उपयोग कर (यानी, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

W3C पृष्ठ सूचियों प्रतिबंध का आकार बदलने के लिए संभावित मान: कोई नहीं, दोनों, क्षैतिज, खड़ी, और इनहेरिट:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

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

सुपर महत्वपूर्ण जानना:

यह संपत्ति तब तक कुछ नहीं करती है जब तक कि अतिप्रवाह संपत्ति दृश्यमान के अलावा कुछ और न हो, जो कि अधिकांश तत्वों के लिए डिफ़ॉल्ट है। तो आम तौर पर इस का उपयोग करने के लिए, आपको कुछ अतिप्रवाह की तरह सेट करना होगा: स्क्रॉल;

सारा कोप द्वारा उद्धरण, http://css-tricks.com/almanac/properties/r/resize/

— डोनट
स्रोत

फ़ायरफ़ॉक्स, ओपेरा और / या IE के लिए एक समाधान है?

— 31इमे विद

6

@ )Ime IE और FF3 (और पहले) समर्थन आकार बदलने को शामिल नहीं करते हैं, इसलिए उनके लिए एक समाधान की आवश्यकता नहीं है। FF4 के लिए, यह समाधान काम करना चाहिए।

— डोनट

24

davidwalsh.name/textarea-resize के अनुसार - आकार का उपयोग करें: ऊर्ध्वाधर या आकार: क्षैतिज से एक आयाम के लिए विवश करने के लिए। या किसी भी अधिकतम-चौड़ाई, अधिकतम-ऊँचाई, न्यूनतम-चौड़ाई और न्यूनतम-ऊँचाई का उपयोग करें।

— जॉन हल्का

3

क्या मैं अकेला हूँ जो सीएसएस और विशेषताओं का उपयोग करके इसे सेट करने के लिए अजीब लगता है? फिर मैं CSS ... का उपयोग करके अक्षम या जाँच या अन्य गुणों को सेट क्यों नहीं कर सकता ...

— Buksy

6

@Buksy क्योंकि "अक्षम" एक राज्य है, न कि एक दृश्य संपत्ति। इस प्रकार यह तर्कसंगत है कि इसे स्टाइल भाषा से तय नहीं किया जाना चाहिए ।

— क्रोल्टन

206

सीएसएस में ...

textarea {
    resize: none;
}

— जेफ पार्कर
स्रोत

105

मुझे दो चीजें मिलीं:

प्रथम

textarea{resize: none}

यह एक सीएसएस 3 है, जो अभी तक जारी नहीं किया गया है , फ़ायरफ़ॉक्स 4 (और बाद में), क्रोम और सफारी के साथ संगत है ।

एक अन्य प्रारूप सुविधा overflow: autoसही स्क्रॉलबार से छुटकारा पाने के लिए है, डीआईआर विशेषता को ध्यान में रखते हुए ।

कोड और विभिन्न ब्राउज़र

मूल HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

कुछ ब्राउज़र

इंटरनेट एक्सप्लोरर 8

यहां छवि विवरण दर्ज करें

फ़ायरफ़ॉक्स 17.0.1

यहां छवि विवरण दर्ज करें

क्रोम

यहां छवि विवरण दर्ज करें

— रामी जमलेह
स्रोत

62

CSS 3 में UI तत्वों के लिए एक नई संपत्ति है जो आपको ऐसा करने की अनुमति देगा। संपत्ति आकार बदलने वाली संपत्ति है । इसलिए आप सभी टेक्सटेरिया तत्वों के आकार को निष्क्रिय करने के लिए अपनी स्टाइलशीट में निम्नलिखित शामिल करेंगे:

textarea { resize: none; }

यह एक सीएसएस 3 संपत्ति है; ब्राउज़र संगतता देखने के लिए संगतता चार्ट का उपयोग करें ।

व्यक्तिगत रूप से, मुझे यह बहुत परेशान करने वाला लगेगा कि टेक्स्टारिया तत्वों पर अक्षम होना चाहिए। यह उन स्थितियों में से एक है जहां डिजाइनर उपयोगकर्ता के ग्राहक को "तोड़ने" की कोशिश कर रहा है। यदि आपका डिज़ाइन एक बड़े बनावट को समायोजित नहीं कर सकता है, तो आप पुनर्विचार करना चाह सकते हैं कि आपका डिज़ाइन कैसे काम करता है। textarea { resize: both !important; }आपकी वरीयता को ओवरराइड करने के लिए कोई भी उपयोगकर्ता अपने उपयोगकर्ता स्टाइलशीट में जोड़ सकता है ।

— जेम्स समर्स
स्रोत

लेकिन वह उपयोगकर्ता जानबूझकर अपने लेआउट को तोड़ने वाला होगा , बजाय एक उपयोगकर्ता के जिसे उसके / उसके आकार बदलने की आवश्यकता texareaहोती है और कुछ काम नहीं करने के लिए समाप्त होता है

— Redwolf Programs

25

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

— इम्तियाज अली बेगल
स्रोत

21

यदि आपको गहरे समर्थन की आवश्यकता है, तो आप एक पुरानी स्कूल तकनीक का उपयोग कर सकते हैं:

textarea {
    max-width: /* desired fixed width */ px;
    min-width: /* desired fixed width */ px;
    min-height: /* desired fixed height */ px;
    max-height: /* desired fixed height */ px;
}

— येवजेनिय
स्रोत

7

resize:noneनीचे के कोने में दिखाई देने वाले हैंडल को रोकने के लिए भी इस घोल का उपयोग करें जो निराशाजनक रूप से काम नहीं करता है।

— मैक्रोमैन

13

यह HTML में आसानी से किया जा सकता है:

<textarea name="textinput" draggable="false"></textarea>

यह मेरे लिए काम करता है। डिफ़ॉल्ट मान है trueके लिए draggableविशेषता।

— इस प्रकार विथ विक्रमसिंघे
स्रोत

यह एक HTML 5 विशेषता है, इसलिए केवल नए ब्राउज़र ही समर्थन करेंगे। मैंने कहीं पढ़ा है IE इसे 9 से समर्थन करता है।

— एंटनी डी 'एंड्रिया

4

यह अधिकांश ब्राउज़रों में काम कर रहा है। हर नवीनतम ब्राउज़र में।

— विक्रमसिंघे

यह textarea को आकार देने से नहीं रोकेगा

— Mishko Vladimir

@ AntonyD'Andrea यह नवीनतम क्रोम पर काम नहीं कर रहा है: jsfiddle.net/ps2v8df9

— अद्वैत जुन्नारकर

6

आकार बदलने की संपत्ति को निष्क्रिय करने के लिए, निम्नलिखित सीएसएस संपत्ति का उपयोग करें:

resize: none;

आप या तो इनलाइन शैली की संपत्ति के रूप में इसे लागू कर सकते हैं:
```
<textarea style="resize: none;"></textarea>
```
या इस <style>...</style>तरह के तत्व टैग के बीच में :
```
textarea {
    resize: none;
}
```

— Webeng
स्रोत

6

आप बस resize: none;अपने सीएसएस में उपयोग करें।

आकार बदलने संपत्ति निर्दिष्ट करता है या नहीं, एक तत्व उपयोगकर्ता द्वारा पुनः आकार देने योग्य है।

नोट: आकार बदलने वाली संपत्ति उन तत्वों पर लागू होती है जिनकी गणना अतिप्रवाह मूल्य "दृश्यमान" के अलावा कुछ और है।

इसके अलावा आकार इस समय इंटरनेट एक्सप्लोरर में समर्थित नहीं है।

यहाँ आकार बदलने के लिए विभिन्न गुण हैं:

कोई आकार नहीं:

textarea {
  resize: none;
}

दोनों तरीकों (लंबवत और क्षैतिज रूप से) का आकार बदलें:

textarea {
  resize: both;
}

लंबवत आकार बदलें:

textarea {
  resize: vertical;
}

क्षैतिज रूप से आकार बदलें:

textarea {
  resize: horizontal;
}

यदि आपके पास widthऔर heightआपके सीएसएस या HTML में भी है, तो यह आपके टेक्स्टारिया को व्यापक ब्राउज़र समर्थन के साथ आकार बदलने से रोकेगा।

— एलिरेज़ा
स्रोत

3

CSS 3 इस समस्या को हल कर सकती है। दुर्भाग्य से यह आजकल उपयोग किए गए ब्राउज़रों के केवल 60% पर समर्थित है।

Internet Explorer और iOS के लिए आप आकार बदलना बंद नहीं कर सकते हैं, लेकिन आप textareaइसकी सेटिंग widthऔर करके आयाम को सीमित कर सकते हैं height।

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

डेमो देखें

— Oriol
स्रोत

3

आप इस तरह से textarea संपत्ति को निष्क्रिय कर सकते हैं:

textarea {
    resize: none;
}

निष्क्रिय करने के लिए खड़ी या क्षैतिज आकार बदलने, उपयोग

resize: vertical;

या

resize: horizontal;

— पीटर मोर्टेंसन
स्रोत

2

मैंने यह दिखाने के लिए एक छोटा डेमो बनाया है कि कैसे गुण काम करते हैं। मुझे उम्मीद है कि यह आपकी और दूसरों की भी मदद करेगा।

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

स्निपेट का विस्तार करें

— अंबुज खन्ना
स्रोत

1

इसके साथ @style, आप इसे एक कस्टम आकार दे सकते हैं और आकार बदलने की सुविधा को अक्षम कर सकते हैं (resize: none;)।

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

— कार्लोस डी जीसस बैज
स्रोत

1

नमस्कार, आपके उत्तर के लिए धन्यवाद, अगली बार कृपया कोड प्रारूपित करें।

— बैपटिस्ट मिल-मैथियास

यह asp.net MVC आधारित उत्तर है। बहुत अच्छा।

— योगीहोस्टिंग

0

आप jQuery के साथ भी कोशिश कर सकते हैं

$('textarea').css("resize", "none");

— संतोष खलसे
स्रोत

3

आपको अधिक जुकाम का उपयोग करना चाहिए । आप इसका पर्याप्त उपयोग नहीं कर रहे हैं। :)

— फिलिप सविच

1

यह एक मेम है - उदाहरण के लिए, "आपको पूरी तरह से ड्रॉप करना चाहिए और jQuery का प्रयास करना चाहिए।" ।

— पीटर मोर्टेंसन

0

सभी के लिए आकार बदलने को अक्षम करने के लिए textarea:

textarea {
    resize: none;
}

किसी विशिष्ट के लिए आकार बदलने को अक्षम करने के लिए textarea, एक विशेषता name, या एक जोड़ें idऔर इसे किसी चीज़ पर सेट करें। इस मामले में, यह नाम दिया गया हैnoresize

एचटीएमएल

<textarea name='noresize' id='noresize'> </textarea>

सीएसएस

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}

— ABK
स्रोत

-2

!importantइसे जोड़ने से काम होता है:

width:325px !important; height:120px !important; outline:none !important;

outline बस कुछ ब्राउज़रों पर नीली रूपरेखा से बचने के लिए है।

— kaelds
स्रोत

6

!importantविशेषता का दुरुपयोग न करें । चौड़ाई और ऊंचाई को ठीक करने के लिए अर्थहीन अगर CSS विशेषता resize: noneआकार को हटा सकती है

— Raptor

1

!importantबुराई नहीं है?

— पीटर मोर्टेंसन

वर्तमान क्रोम में यह क्षैतिज आकार बदलना बंद कर देता है, लेकिन मैं अभी भी बनावट को लंबवत आकार दे सकता हूं।

— अद्वैत जुन्नारकर