wake-up-neo.com

Wie deaktiviere ich die veränderbare Eigenschaft von Textarea?

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?

enter image description here

htmlcss
2452
user549757

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

textarea {
  resize: none;
}

Um es für einige (aber nicht alle) textareas 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/

3269
Donut

In CSS ...

textarea {
    resize: none;
}
195
Jeff Parker

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

code und verschiedene Browser

Basic html

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

Einige Browser

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

100
Rami Jamleh

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.

62
James Sumners
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
22
Imtiaz Ali Baigal

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

Das geht in html einfach

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

Das funktioniert bei mir. Der Standardwert ist true für das draggable Attribut.

12
Thusitha Wickramasinghe

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.

6
Alireza

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

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 */

Siehe Demo

3
Oriol

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;
3
user7122338

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;" })
1
Carlos de Jesus Baez

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>
1
Rafiqul Islam

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;
}
0
Gokul Raj K.N.

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>
0
Ambuj Khanna

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

Sie können es auch mit jQuery versuchen

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

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

0
kaelds