Wyłącz zmianę rozmiaru obszaru tekstowego

Próbuję wyłączyć zmianę rozmiaru textarea w mojej witrynie; w tej chwili używam tej metody:

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

Wiem, że moja metoda nie jest poprawna i szukam lepszej w JavaScript. Jestem początkującym, więc najlepszym rozwiązaniem dla mnie będzie HTML5 lub jQuery.

Wypróbuj ten CSS, aby wyłączyć zmianę rozmiaru

CSS wyłączający zmianę rozmiaru dla wszystkich obszarów tekstowych wygląda następująco:

textarea {
    resize: none;
}

Zamiast tego możesz po prostu przypisać go do pojedynczego obszaru tekstowego według nazwy (gdzie znajduje się kod HTML obszaru tekstowego):

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

Lub według identyfikatora (gdzie tekst obszaru HTML jest):

#foo {
    resize: none;
}

Zaczerpnięte z: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

to wykona twoją pracę

  textarea{
        resize:none;
    }

CSS3 może rozwiązać ten problem. Niestety obecnie jest obsługiwany tylko w 60% używanych przeglądarek .

W przypadku IE i iOS nie można wyłączyć zmiany rozmiaru, ale można ograniczyć textareawymiar, ustawiając jego widthi height.

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

Zobacz Demo

Można to łatwo zrobić, używając atrybutu html draggable

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

Wartość domyślna to prawda.

Tylko jedna dodatkowa opcja, jeśli chcesz przywrócić domyślne zachowanie dla wszystkich obszarów tekstowych w aplikacji, możesz dodać do swojego CSS:

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

I wykonaj następujące czynności, aby włączyć miejsce, w którym chcesz zmienić rozmiar:

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

Pamiętaj, że to rozwiązanie może nie działać we wszystkich przeglądarkach, które chcesz obsługiwać. Możesz sprawdzić listę wsparcia resizetutaj: http://caniuse.com/#feat=css-resize

Jak na pytanie, wymieniłem odpowiedzi w javascript

Wybierając TagName

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

Wybierając Id

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

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

powyższy kod działa na większości przeglądarek

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

wykonaj obie te czynności, aby działało na maksymalnej liczbie przeglądarek

To działa dla mnie

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