मैं एक के प्राप्य संपत्ति को निष्क्रिय करना चाहता हूं textarea
।
वर्तमान में, मैं माउस textarea
के नीचे और दाएं कोने पर क्लिक करके आकार बदल सकता हूं textarea
। मैं इसे कैसे निष्क्रिय कर सकता हूं?
मैं एक के प्राप्य संपत्ति को निष्क्रिय करना चाहता हूं textarea
।
वर्तमान में, मैं माउस textarea
के नीचे और दाएं कोने पर क्लिक करके आकार बदल सकता हूं textarea
। मैं इसे कैसे निष्क्रिय कर सकता हूं?
जवाबों:
निम्नलिखित सीएसएस नियम textarea
तत्वों के लिए व्यवहार का आकार बदलने में अक्षम करता है :
textarea {
resize: none;
}
कुछ के लिए यह निष्क्रिय करने के लिए (लेकिन सभी नहीं) textarea
है, वहाँ एक हैं विकल्पों में से जोड़ी ।
(यानी, ) के लिए सेट विशेषता के textarea
साथ एक विशेष को निष्क्रिय करने के लिए :name
foo
<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/
सीएसएस में ...
textarea {
resize: none;
}
मुझे दो चीजें मिलीं:
प्रथम
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>
कुछ ब्राउज़र
CSS 3 में UI तत्वों के लिए एक नई संपत्ति है जो आपको ऐसा करने की अनुमति देगा। संपत्ति आकार बदलने वाली संपत्ति है । इसलिए आप सभी टेक्सटेरिया तत्वों के आकार को निष्क्रिय करने के लिए अपनी स्टाइलशीट में निम्नलिखित शामिल करेंगे:
textarea { resize: none; }
यह एक सीएसएस 3 संपत्ति है; ब्राउज़र संगतता देखने के लिए संगतता चार्ट का उपयोग करें ।
व्यक्तिगत रूप से, मुझे यह बहुत परेशान करने वाला लगेगा कि टेक्स्टारिया तत्वों पर अक्षम होना चाहिए। यह उन स्थितियों में से एक है जहां डिजाइनर उपयोगकर्ता के ग्राहक को "तोड़ने" की कोशिश कर रहा है। यदि आपका डिज़ाइन एक बड़े बनावट को समायोजित नहीं कर सकता है, तो आप पुनर्विचार करना चाह सकते हैं कि आपका डिज़ाइन कैसे काम करता है। textarea { resize: both !important; }
आपकी वरीयता को ओवरराइड करने के लिए कोई भी उपयोगकर्ता अपने उपयोगकर्ता स्टाइलशीट में जोड़ सकता है ।
texarea
होती है और कुछ काम नहीं करने के लिए समाप्त होता है
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
यदि आपको गहरे समर्थन की आवश्यकता है, तो आप एक पुरानी स्कूल तकनीक का उपयोग कर सकते हैं:
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;
}
resize:none
नीचे के कोने में दिखाई देने वाले हैंडल को रोकने के लिए भी इस घोल का उपयोग करें जो निराशाजनक रूप से काम नहीं करता है।
यह HTML में आसानी से किया जा सकता है:
<textarea name="textinput" draggable="false"></textarea>
यह मेरे लिए काम करता है। डिफ़ॉल्ट मान है true
के लिए draggable
विशेषता।
आकार बदलने की संपत्ति को निष्क्रिय करने के लिए, निम्नलिखित सीएसएस संपत्ति का उपयोग करें:
resize: none;
आप या तो इनलाइन शैली की संपत्ति के रूप में इसे लागू कर सकते हैं:
<textarea style="resize: none;"></textarea>
या इस <style>...</style>
तरह के तत्व टैग के बीच में :
textarea {
resize: none;
}
आप बस resize: none;
अपने सीएसएस में उपयोग करें।
आकार बदलने संपत्ति निर्दिष्ट करता है या नहीं, एक तत्व उपयोगकर्ता द्वारा पुनः आकार देने योग्य है।
नोट: आकार बदलने वाली संपत्ति उन तत्वों पर लागू होती है जिनकी गणना अतिप्रवाह मूल्य "दृश्यमान" के अलावा कुछ और है।
इसके अलावा आकार इस समय इंटरनेट एक्सप्लोरर में समर्थित नहीं है।
यहाँ आकार बदलने के लिए विभिन्न गुण हैं:
कोई आकार नहीं:
textarea {
resize: none;
}
दोनों तरीकों (लंबवत और क्षैतिज रूप से) का आकार बदलें:
textarea {
resize: both;
}
लंबवत आकार बदलें:
textarea {
resize: vertical;
}
क्षैतिज रूप से आकार बदलें:
textarea {
resize: horizontal;
}
यदि आपके पास width
और height
आपके सीएसएस या HTML में भी है, तो यह आपके टेक्स्टारिया को व्यापक ब्राउज़र समर्थन के साथ आकार बदलने से रोकेगा।
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 */
आप इस तरह से textarea संपत्ति को निष्क्रिय कर सकते हैं:
textarea {
resize: none;
}
निष्क्रिय करने के लिए खड़ी या क्षैतिज आकार बदलने, उपयोग
resize: vertical;
या
resize: horizontal;
मैंने यह दिखाने के लिए एक छोटा डेमो बनाया है कि कैसे गुण काम करते हैं। मुझे उम्मीद है कि यह आपकी और दूसरों की भी मदद करेगा।
.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>
इसके साथ @style
, आप इसे एक कस्टम आकार दे सकते हैं और आकार बदलने की सुविधा को अक्षम कर सकते हैं (resize: none;)
।
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
आप jQuery के साथ भी कोशिश कर सकते हैं
$('textarea').css("resize", "none");
सभी के लिए आकार बदलने को अक्षम करने के लिए 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;
}
!important
इसे जोड़ने से काम होता है:
width:325px !important; height:120px !important; outline:none !important;
outline
बस कुछ ब्राउज़रों पर नीली रूपरेखा से बचने के लिए है।
!important
विशेषता का दुरुपयोग न करें । चौड़ाई और ऊंचाई को ठीक करने के लिए अर्थहीन अगर CSS विशेषता resize: none
आकार को हटा सकती है
!important
बुराई नहीं है?