Deaktivieren Sie die Größenänderung des Textbereichs

117

Ich versuche, die Größe des Textbereichs 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 suche nach einer besseren in JavaScript. Ich bin ein Anfänger, daher ist HTML5 oder jQuery die beste Lösung für mich.

html textarea Magier
quelle

253

Versuchen Sie dieses 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 (wobei sich der HTML-Textbereich befindet):

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

Oder nach ID (wo sich der Textbereich HTML befindet):

#foo {
    resize: none;
}

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

feco
quelle

7

Anstatt nur auf eine Lösung zu verlinken, sollten Sie dies hier ein wenig erklären. Viele andere Leute, die sich diese Frage in Zukunft ansehen, werden nicht die Mühe haben, auf einen Link zu klicken, um eine Antwort zu erhalten. Fügen Sie hier einige Details hinzu und ich werde Ihre Antwort +1 geben.

Jon Egeland

21

das wird deinen Job machen

  textarea{
        resize:none;
    }

Geben Sie hier die Bildbeschreibung ein

Raab
quelle

8

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 textareaDimension durch Festlegen des widthund einschränken height.

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

Siehe Demo

Oriol
quelle

2

Es kann einfach gemacht werden, indem nur das HTML-Draggable-Attribut verwendet wird

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

Der Standardwert ist true.

Soitha Wickramasinghe
quelle

2

Bei der Frage geht es darum, die Größe des Textbereichs zu ändern, nicht per Drag & Drop. Wie erwartet reicht es in Chrome (zumindest) nicht aus, dieses Attribut in einem Textbereich festzulegen.

Peveuve

2

Nur eine zusätzliche 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 die folgenden 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. Sie können die Liste der Supportleistungen resizehier einsehen : http://caniuse.com/#feat=css-resize

Darlesson
quelle

1

Gemäß der Frage habe ich die Antworten in Javascript aufgelistet

Durch Auswahl von TagName

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

Durch Auswahl von Id

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

Mano
quelle

0

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

Führen Sie beides aus, damit die maximale Anzahl von Browsern funktioniert

niemand
quelle

0

Das funktioniert bei mir

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>

Erweitern Sie das Snippet

Kordrad
quelle

Deaktivieren Sie die Größenänderung des Textbereichs

Antworten: