Wie deaktiviere ich die veränderbare Eigenschaft eines Textbereichs?

2649

Ich möchte die veränderbare Eigenschaft von a deaktivieren textarea.

Derzeit kann ich die Größe ändern, textareaindem ich auf die untere rechte Ecke von textareaklicke und die Maus ziehe. Wie kann ich das deaktivieren?

Geben Sie hier die Bildbeschreibung ein

html  css 
— user549757
quelle
4
@JDIsaaks - Darüber hinaus kann das Ermöglichen der Größenänderung in bestimmten Situationen das Layout und die Druckbarkeit beeinträchtigen (ein wichtiger Aspekt eines aktuellen unternehmenskritischen Projekts).
— random_user_name
10
Manchmal möchten Sie wirklich einen Textbereich ohne Größenänderung. In diesem Fall beispielsweise, wenn Sie einen Textbereich (bedingt) in etwas konvertieren, das nur wie ein Etikett aussieht. Es sieht wirklich seltsam aus, ein Etikett mit einem zufälligen schwebenden Grabber zur Seite zu haben.
— Neminem
2
Aus Liebe zu allem, was gut ist, tun Sie dies bitte nicht in einem tatsächlichen Textbereich, da Sie sonst Ihre Hauptbenutzer entfremden. Das Unterbrechen der Kernbrowserfunktionalität sollte als nukleare Option betrachtet werden.
— Superluminary

Antworten:

3532

Die folgende CSS-Regel deaktiviert das Größenänderungsverhalten für textareaElemente:

textarea {
  resize: none;
}

Um es für einige (aber nicht alle) zu deaktivieren textarea, gibt es mehrere Optionen .

So deaktivieren Sie ein bestimmtes Attribut textareamit dem nameAttribut foo(dh <textarea name="foo"></textarea>):

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

Oder mit einem idAttribut (dh <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Auf der W3C-Seite werden mögliche Werte für Größenänderungsbeschränkungen aufgeführt: keine, beide, horizontal, vertikal und erben:

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

Überprüfen Sie auf einer anständigen Kompatibilitätsseite , welche Browser diese Funktion derzeit unterstützen. Als Jon Hulka kommentiert hat, können die Abmessungen werden weiter eingeschränkt Verwendung max-Breite, Höhe max-min-Breite und Höhe in min-CSS.

Super wichtig zu wissen:

Diese Eigenschaft führt nur dann aus, wenn die Überlaufeigenschaft nicht sichtbar ist. Dies ist die Standardeinstellung für die meisten Elemente. Um dies zu verwenden, müssen Sie im Allgemeinen so etwas wie Überlauf einstellen: scroll;

Zitat von Sara Cope, http://css-tricks.com/almanac/properties/r/resize/

— Krapfen
quelle
Gibt es eine Lösung für Firefox, Opera und / oder IE?
— Šime Vidas
6
@ Šime IE und FF3 (und frühere Versionen) bieten keine Unterstützung für die Größenänderung, sodass keine Lösung für sie erforderlich ist. Für FF4 sollte diese Lösung funktionieren.
— Donut
24
gemäß davidwalsh.name/textarea-resize - verwenden Sie resize: vertical oder resize: horizontal, um die Größenänderung auf eine Dimension zu beschränken. Oder verwenden Sie eine der maximalen Breite, maximalen Höhe, minimalen Breite und minimalen Höhe.
— Jon Hulka
3
Bin ich der einzige, der es seltsam findet, dies mit CSS und nicht mit Attributen festzulegen? Warum kann ich dann nicht deaktivierte oder
— aktivierte
6
@Buksy Weil "deaktiviert" ein Status ist, keine visuelle Eigenschaft. Daher ist es logisch, dass es nicht durch eine Styling- Sprache entschieden werden sollte .
— Kroltan
105

Ich habe zwei Dinge gefunden:

Zuerst

textarea{resize: none}

Dies ist ein CSS 3, das noch nicht veröffentlicht wurde und mit Firefox 4 (und höher), Chrome und Safari kompatibel ist .

Eine weitere Formatierungsfunktion besteht darin overflow: auto, die rechte Bildlaufleiste unter Berücksichtigung des dir- Attributs zu entfernen .

Code und verschiedene Browser

Grundlegendes HTML

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

Einige Browser

  • Internet Explorer 8

Geben Sie hier die Bildbeschreibung ein

  • Firefox 17.0.1

Geben Sie hier die Bildbeschreibung ein

  • Chrom

Geben Sie hier die Bildbeschreibung ein

— Rami Jamleh
quelle
62

CSS 3 verfügt über eine neue Eigenschaft für UI-Elemente, mit der Sie dies tun können. Die Eigenschaft ist die Eigenschaft zum Ändern der Größe . Sie würden Ihrem Stylesheet also Folgendes hinzufügen, um die Größenänderung aller Textbereichselemente zu deaktivieren:

textarea { resize: none; }

Dies ist eine CSS 3-Eigenschaft. Verwenden Sie eine Kompatibilitätstabelle , um die Browserkompatibilität anzuzeigen.

Persönlich würde ich es sehr ärgerlich finden, die Größenänderung für Textbereichselemente deaktiviert zu haben. Dies ist eine dieser Situationen, in denen der Designer versucht, den Client des Benutzers zu "brechen". Wenn Ihr Design keinen größeren Textbereich aufnehmen kann, sollten Sie die Funktionsweise Ihres Designs überdenken. Jeder Benutzer kann textarea { resize: both !important; }seinem Benutzer-Stylesheet hinzufügen , um Ihre Präferenzen zu überschreiben.

— James Sumners
quelle
Aber das wäre der Benutzer, der absichtlich sein Layout bricht , und nicht ein Benutzer, der nur die Größe seines / ihres ändern muss texareaund am Ende dafür
— sorgt
21

Wenn Sie tiefe Unterstützung benötigen, können Sie eine 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;
}
— yevgeniy
quelle
7
Verwenden Sie resize:nonediese Lösung auch, um zu verhindern, dass der Griff in der unteren Ecke erscheint, was frustrierend nicht funktioniert.
— MacroMan
13

Dies kann einfach in HTML erfolgen:

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

Das funktioniert bei mir. Der Standardwert ist truefür das draggableAttribut.

— Soitha Wickramasinghe
quelle
Dies ist ein HTML 5-Attribut, sodass nur neuere Browser unterstützt werden. Ich habe irgendwo gelesen, dass IE es ab 9 unterstützt.
— Antony D'Andrea
4
Dies funktioniert in den meisten Browsern. in jedem neuesten Browser.
— Thusitha Wickramasinghe
es wird nicht verhindern, dass die
— Größe des
@ AntonyD'Andrea Dies funktioniert nicht mit dem neuesten Chrome: jsfiddle.net/ps2v8df9
— Advait Junnarkar
6

Verwenden Sie die folgende CSS-Eigenschaft, um die Größenänderungseigenschaft zu deaktivieren:

resize: none;

  • Sie können dies entweder als Inline-Stileigenschaft wie folgt anwenden:

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

  • oder zwischen <style>...</style>Element-Tags wie folgt:

    textarea {
    resize: none;
}
— Webeng
quelle
6

Sie verwenden einfach: resize: none;in Ihrem CSS.

Die Eigenschaft resize gibt an, ob die Größe eines Elements vom Benutzer geändert werden kann.

Hinweis: Die Eigenschaft resize gilt für Elemente, deren berechneter Überlaufwert nicht "sichtbar" ist.

Ändern Sie auch die Größe, die derzeit in Internet Explorer nicht unterstützt wird.

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;
}

Vertikale Größenänderung:

textarea {
  resize: vertical;
}

Horizontale Größenänderung:

textarea {
  resize: horizontal;
}

Auch wenn Sie widthund heightin Ihrem CSS oder HTML haben, wird verhindert, dass die Größe Ihres Textbereichs geändert wird, mit einer breiteren Browserunterstützung.

— Alireza
quelle
3

CSS 3 kann dieses Problem lösen. Leider wird es heutzutage nur von 60% der verwendeten Browser unterstützt .

Für Internet Explorer und iOS können Sie die Größenänderung nicht deaktivieren, aber Sie können die textareaDimension einschränken, indem Sie das widthund festlegen height.

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

Siehe Demo

— Oriol
quelle
3

Sie können die Eigenschaft textarea einfach folgendermaßen deaktivieren :

textarea {
    resize: none;
}

Verwenden Sie zum Deaktivieren der vertikalen oder horizontalen Größenänderung

resize: vertical;

oder

resize: horizontal;
— Peter Mortensen
quelle
2

Ich habe eine kleine Demo erstellt, um zu zeigen, wie die Größenänderung von Eigenschaften funktioniert. 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>
Erweitern Sie das Snippet

— Ambuj Khanna
quelle
1

Mit @stylekönnen Sie eine benutzerdefinierte Größe festlegen und die Größenänderungsfunktion deaktivieren (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— Carlos de Jesus Baez
quelle
1
Hallo, danke für deine Antwort. Bitte formatiere den Code das nächste Mal.
— Baptiste Mille-Mathias
Dies ist eine auf asp.net MVC basierende Antwort. Sehr schön.
— Yogihosting
0

So deaktivieren Sie die Größenänderung für alle textareas:

textarea {
    resize: none;
}

Um die Größenänderung für ein bestimmtes zu deaktivieren textarea, fügen Sie ein Attribut nameoder ein hinzu idund setzen Sie es auf etwas. In diesem Fall heißt esnoresize

HTML

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

CSS

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

#noresize {
    resize: none;
}
— Abk
quelle
-2

Durch Hinzufügen !importantfunktioniert es:

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

outline dient nur dazu, den blauen Umriss in bestimmten Browsern zu vermeiden.

— Kaelds
quelle
6
Missbrauche kein !importantAttribut. Es ist bedeutungslos, die Breite und Höhe zu korrigieren, wenn das CSS-Attribut resize: nonedie Größenänderungsfunktion entfernen kann
— Raptor,
1
Ist das nicht !importantböse?
— Peter Mortensen
In aktuellem Chrome wird die horizontale Größenänderung gestoppt, aber ich kann die Größe des Textbereichs immer noch vertikal ändern.
— Advait Junnarkar
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.