wake-up-neo.com

Deaktivieren Sie die Größenänderung von Textbereichen

Ich versuche, die Größenänderung von Textbereichen auf meiner Website zu deaktivieren. Im Moment verwende ich diese Methode:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

Ich weiß, dass meine Methode nicht korrekt ist, und ich suche nach einer besseren in JavaScript. Ich bin ein Anfänger, daher ist HTML5 oder jQuery die beste Lösung für mich.

114
Wizard

Versuchen Sie diese CSS, um die Größenänderung zu deaktivieren

Das CSS zum Deaktivieren der Größenänderung für alle Textbereiche sieht folgendermaßen aus:

textarea {
    resize: none;
}

Sie können es stattdessen einfach einem einzelnen Textbereich nach Namen zuweisen (wo sich der HTML-Textbereich befindet):

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

Oder per id (wo der Textbereich HTML ist):

#foo {
    resize: none;
}

Entnommen aus: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

240
feco

das wird deine Arbeit machen 

  textarea{
        resize:none;
    }

enter image description here

19
Raab

CSS3 kann dieses Problem lösen. Leider wird dies nur von 60% der verwendeten Browser unterstützt.

Bei IE und iOS können Sie die Größenänderung nicht deaktivieren, Sie können jedoch die Dimension textarea einschränken, indem Sie width und height einstellen.

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

Siehe Demo

7
Oriol

Dies ist einfach durch das Ziehen des Attributs "html" möglich

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

Der Standardwert ist true.

Eine weitere Option: Wenn Sie das Standardverhalten für alle Textbereiche in der Anwendung wiederherstellen möchten, können Sie Ihrem CSS Folgendes hinzufügen:

textarea:not([resize="true"]) {
  resize: none !important;
}

Führen Sie folgende Schritte aus, um zu aktivieren, wo Sie die Größe ändern möchten:

<textarea resize="true"></textarea>

Beachten Sie, dass diese Lösung möglicherweise nicht in allen Browsern funktioniert, die Sie unterstützen möchten. Die Liste der Unterstützung für resize finden Sie hier: http://caniuse.com/#feat=css-resize

2
Darlesson
//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

der obige Code funktioniert in den meisten Browsern

//HTML:
<textarea id='textarea' draggable='false'></textarea>

beides tun, damit es mit der maximalen Anzahl von Browsern funktioniert

0
nobody

Wie in der Frage habe ich die Antworten in javascript aufgelistet.

Durch Auswählen von TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

Durch die Auswahl von Id

document.getElementById('textArea').style.resize = "none";
0
Mano