Ich möchte die veränderbare Eigenschaft eines textarea
deaktivieren.
Derzeit kann ich die Größe eines textarea
ändern, indem ich auf die untere rechte Ecke des textarea
klicke und die Maus ziehe. Wie kann ich das deaktivieren?
Die folgende CSS-Regel deaktiviert das Größenänderungsverhalten für textarea
-Elemente:
textarea {
resize: none;
}
Um es für einige (aber nicht alle) textarea
s zu deaktivieren, gibt es ein einige Optionen .
So deaktivieren Sie einen bestimmten textarea
mit dem Attribut name
, das auf foo
festgelegt ist (d. H. <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Oder verwenden Sie ein id
-Attribut (d. H. <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
Die W3C-Seite listet mögliche Werte für Größenanpassungsbeschränkungen auf: none, both, horizontal, vertical und inherit:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Lesen Sie eine anständige Kompatibilitätsseite , um festzustellen, welche Browser diese Funktion derzeit unterstützen. Wie Jon Hulka kommentiert hat, können die Dimensionen in CSS mit max-width, max-height, min-width und min-height weiter eingeschränkt angegeben werden.
Super wichtig zu wissen:
Diese Eigenschaft bewirkt nichts, es sei denn, die Überlaufeigenschaft ist nicht sichtbar, was für die meisten Elemente die Standardeinstellung ist. Um dies im Allgemeinen zu verwenden, müssen Sie so etwas wie einen Überlauf einstellen: scroll;
Zitat von Chris Coyier, http://css-tricks.com/almanac/properties/r/resize/
In CSS ...
textarea {
resize: none;
}
Ich habe 2 Dinge gefunden
zuerst
textarea{resize:none}
dies ist eine CSS3 die noch nicht veröffentlicht wurde kompatibel mit Firefox4 + chrome und Safari
ein weiteres Formatmerkmal ist overflow: auto , um die rechte Bildlaufleiste unter Berücksichtigung des Attributs dir zu entfernen
Basic html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Einige Browser
CSS3 verfügt über eine neue Eigenschaft für UI-Elemente, mit der Sie dies tun können. Die Eigenschaft ist resize property . Sie würden Ihrem Stylesheet also Folgendes hinzufügen, um die Größenänderung aller Textarea-Elemente zu deaktivieren:
textarea { resize: none; }
Dies ist eine CSS3-Eigenschaft. Verwenden Sie ein Kompatibilitätstabelle , um die Browserkompatibilität anzuzeigen.
Persönlich finde ich es sehr ärgerlich, wenn die Größenänderung für Textarea-Elemente deaktiviert ist. Dies ist eine der Situationen, in denen der Designer versucht, den Client des Benutzers zu "unterbrechen". Wenn Ihr Design keinen größeren Textbereich aufnehmen kann, sollten Sie die Funktionsweise Ihres Designs überdenken. Jeder Benutzer kann textarea { resize: both !important; }
zu seinem Benutzer-Stylesheet hinzufügen, um Ihre Einstellungen zu überschreiben.
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Wenn Sie tiefe Unterstützung benötigen, können Sie die Technik der alten Schule anwenden
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;
}
Das geht in html einfach
<textarea name="textinput" draggable="false"></textarea>
Das funktioniert bei mir. Der Standardwert ist true
für das draggable
Attribut.
Sie verwenden einfach: resize: none;
in Ihrem CSS.
Die Eigenschaft Größe ändern gibt an, ob die Größe eines Elements vom Benutzer geändert werden kann.
Hinweis: Die Größenänderungseigenschaft gilt für Elemente, deren berechneter Überlaufwert nicht "sichtbar" ist.
Auch Größenänderung wird derzeit in IE nicht unterstützt.
Hier sind verschiedene Eigenschaften für die Größenänderung:
Keine Größenänderung:
textarea {
resize: none;
}
Ändern Sie die Größe in beide Richtungen (vertikal und horizontal):
textarea {
resize: both;
}
Größe vertikal ändern:
textarea {
resize: vertical;
}
Horizontale Größenänderung:
textarea {
resize: horizontal;
}
Auch wenn Sie width
und height
in Ihrem CSS oder HTML haben, wird verhindert, dass die Größe Ihres Textbereichs mit einer breiteren Browserunterstützung geändert wird.
Verwenden Sie die folgende CSS-Eigenschaft, um die Größenänderungseigenschaft zu deaktivieren:
resize: none;
Sie können dies entweder als eine Inline-Stileigenschaft wie folgt anwenden:
<textarea style="resize: none;"></textarea>
oder dazwischen <style>...</style>
Element-Tags wie folgt:
textarea {
resize: none;
}
CSS3 kann dieses Problem lösen. Leider wird es heutzutage nur von 60% der verwendeten Browser unterstützt.
Für IE und iOS können Sie die Größenänderung nicht deaktivieren, aber Sie können die Dimension textarea
einschränken, indem Sie die Werte width
und height
festlegen.
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
Sie können einfach Textfeld deaktivieren Eigenschaft wie folgt:
textarea{
resize: none;
}
Zum Deaktivieren von vertikal oder horizontal verwenden Sie
resize: vertical;
oder
resize: horizontal;
Mit @style
können Sie eine benutzerdefinierte Größe festlegen und die Größenänderungsfunktion (resize: none;)
deaktivieren.
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
versuche dies:
#foo {
resize: none;
}
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>
Verwenden Sie die CSS-Eigenschaft resize
.
textarea {
resize:none;
}
Dadurch wird die anpassbare Eigenschaft aller Textbereiche deaktiviert.
Zum Deaktivieren eines bestimmten Textbereichs die folgenden Anweisungen verwenden
Verwenden Sie diesen Code, um die anpassbare Eigenschaft von textarea
mit der ID textarea1
zu deaktivieren
#textarea1 {
resize:none;
}
Verwenden Sie diesen Code, um die anpassbare Eigenschaft von textarea
mit dem Namen textareaname1
zu deaktivieren
textarea[name="textareaname1"] {
resize:none;
}
Ich habe eine kleine Demo erstellt, um zu zeigen, wie Eigenschaften zur Größenänderung funktionieren. Ich hoffe, es wird Ihnen und anderen auch helfen.
.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>
Zum Deaktivieren der Größenänderung für alle Textbereiche
textarea {
resize: none;
}
So deaktivieren Sie die Größenänderung für ein bestimmtes textarea
Hinzufügen eines Attributs name
oder eines id
und Festlegen eines bestimmten Werts. In diesem Fall heißt es noresize
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */
#noresize{
resize: none;
}
Sie können es auch mit jQuery versuchen
$('textarea').css("resize", "none");
Das Hinzufügen von! Important macht es möglich:
width:325px !important; height:120px !important; outline:none !important;
"outline" dient nur dazu, die blaue Kontur in bestimmten Browsern zu vermeiden