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

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

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

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

7 111
html textarea

7 ответов:

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

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

textarea {
    resize: none;
}

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

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

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

#foo {
    resize: none;
}

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

227

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

  textarea{
        resize:none;
    }

enter image description here

18

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

Посмотреть Демо

7

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

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

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

3

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

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

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

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

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

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

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

0

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

Выбрав TagName

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

Выбрав Id

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