html - deaktivieren - textarea resize only vertical




Wie deaktiviere ich die veränderbare Eigenschaft des Textbereichs? (11)

CSS3 hat eine neue Eigenschaft für Benutzeroberflächenelemente, mit denen Sie dies tun können. Die Eigenschaft ist die Eigenschaft zur Größenänderung . Sie fügen also Ihrem Stylesheet Folgendes hinzu, um die Größenänderung aller Textarea-Elemente zu deaktivieren:

textarea { resize: none; }

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

Ich persönlich finde es sehr ärgerlich, wenn die Größenänderung von Textfeldelementen deaktiviert ist. Dies ist eine der Situationen, in denen der Designer versucht, den Client des Benutzers zu "brechen". Wenn Ihr Entwurf keinen größeren Textbereich aufnehmen kann, möchten Sie möglicherweise die Funktionsweise Ihres Entwurfs überdenken. Jeder Benutzer kann einen textarea { resize: both !important; } hinzufügen textarea { resize: both !important; } textarea { resize: both !important; } zu ihrem Benutzer-Stylesheet, um Ihre Präferenz zu überschreiben.

Ich möchte die anpassbare Eigenschaft eines textarea deaktivieren.

Derzeit kann ich die Größe eines textarea ändern, indem Sie auf die rechte untere Ecke des textarea klicken und die Maus ziehen. Wie kann ich das deaktivieren?


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, Sie können jedoch die Größe des textarea durch Einstellen von width und height einschränken.

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

Siehe Demo


Dies kann in HTML einfach gemacht werden

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

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


Hinzufügen! Wichtig macht es möglich:

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

Gliederung ist nur zur Vermeidung der blauen Gliederung in bestimmten Browsern


In CSS ...

textarea {
    resize: none;
}

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

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

Sie können es auch mit jQuery versuchen

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

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

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

Anmerkung: Die Eigenschaft zur Größenänderung gilt für Elemente, deren berechneter Überlaufwert etwas anderes als "sichtbar" ist.

Auch die Größenänderung wird im IE derzeit nicht unterstützt.

Hier sind verschiedene Eigenschaften für die Größenänderung:

Nein Größe ändern:

textarea { 
  resize: none; 
}

Ändern Sie die Größe in beide Richtungen (vertikal und horizontal):

textarea { 
  resize: both; 
}

Größe vertikal ändern:

textarea { 
  resize: vertical; 
}

Horizontal skalieren:

textarea { 
  resize: horizontal; 
}

Wenn Sie in CSS oder HTML über width und height verfügen, verhindert dies die Größenänderung Ihres Textbereichs mit einer breiteren Browserunterstützung.


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

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




css