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

117

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

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

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

html textarea колдун
источник

Ответы:

254

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

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

textarea {
    resize: none;
}

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

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

Или по идентификатору (где HTML текстового поля):

#foo {
    resize: none;
}

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

FeCo
источник
7
Вместо того, чтобы просто ссылаться на решение, вы должны немного объяснить его здесь. Многие другие люди, которые будут задавать этот вопрос в будущем, не потрудятся щелкнуть ссылку, чтобы получить ответ. Добавьте сюда некоторые детали, и я поставлю +1 на ваш ответ.
Jon Egeland
21

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

  textarea{
        resize:none;
    }

введите описание изображения здесь

Рааб
источник
8

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

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

Ориоль
источник
2

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

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

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

Сусита Викрамасингхе
источник
2
Вопрос в изменении размера текстового поля, а не в перетаскивании. Итак, как и ожидалось, установка этого атрибута в текстовом поле не работает в Chrome (по крайней мере).
peveuve
2

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

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

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

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

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

Darlesson
источник
1

Что касается вопроса, я перечислил ответы в javascript

Выбрав TagName

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

Выбрав Id

document.getElementById('textArea').style.resize = "none";
Mano
источник
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
}

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

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

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

никто
источник