Отменить изменение размера текстового поля

Я пытаюсь отключить изменение размера textarea на моем сайте; прямо сейчас я использую этот метод:

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

Я знаю, что мой метод неверен, и я ищу лучшего в JavaScript. Я новичок, поэтому лучшим решением для меня будет HTML5 или jQuery.

Ответ 1

Попробуйте этот CSS отключить изменение размера

CSS для отключения изменения размера для всех текстовых областей выглядит следующим образом:

textarea {
    resize: none;
}

Вместо этого вы можете просто назначить его одному текстовому пространству по имени (где есть textarea HTML):

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

Или по id (где textarea HTML):

#foo {
    resize: none;
}

Взято из: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

Ответ 2

это сделает вашу работу

  textarea{
        resize:none;
    }

Ответ 3

Это можно сделать легко, просто используя атрибут html draggable

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

Значение по умолчанию - true.

Ответ 4

CSS3 может решить эту проблему. К сожалению, он поддерживается только 60% используемых браузеров.

Для IE и iOS вы не можете отключить изменение размера, но вы можете ограничить размер textarea, установив его width и height.

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

См. демонстрацию

Ответ 5

Как один дополнительный параметр, если вы хотите вернуть поведение по умолчанию для всех текстовых областей в приложении, вы можете добавить в свой CSS следующее:

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

И сделайте следующее, чтобы включить, где вы хотите изменить размер:

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

Имейте в виду, что это решение может не работать во всех браузерах, которые вы, возможно, захотите поддержать. Вы можете проверить список поддержки resize здесь: http://caniuse.com/#feat=css-resize

Ответ 6

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

выше код работает в большинстве браузеров

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

сделать так, чтобы он работал с максимальным количеством браузеров

Ответ 7

В соответствии с вопросом, я перечислил ответы в javascript

При выборе TagName

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

Выбирая идентификатор

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