Отключить изменение размера textarea
Я пытаюсь отключить изменение размера textarea на моем сайте; прямо сейчас я использую этот метод:
.textarea {
clear:left;
min-width: 267px;
max-width: 267px;
min-height:150px;
max-height:150px;
}
Я знаю, что мой метод неправильный, и я ищу лучший в JavaScript. Я новичок, поэтому лучшим решением для меня будет HTML5 или jQuery.
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/
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 */
Это можно сделать легко, просто используя HTML перетаскивать атрибут
<textarea name="mytextarea" draggable="false"></textarea>
значение по умолчанию-true.
только один дополнительный вариант, если вы хотите вернуть поведение по умолчанию для всех текстовых областей в приложении, вы можете добавить следующее в свой CSS:
textarea:not([resize="true"]) {
resize: none !important;
}
и сделайте следующее, чтобы включить, где вы хотите изменить размер:
<textarea resize="true"></textarea>
иметь в виду, что это решение может не работать во всех браузерах, вы хотите поддержать. Вы можете проверить список поддержки resize
здесь:http://caniuse.com/#feat=css-resize
//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>
сделайте оба, чтобы он работал на максимальном количестве браузеров
в соответствии с вопросом, я перечислил ответы в в JavaScript
Выбрав TagName
document.getElementsByTagName('textarea')[0].style.resize = "none";
Выбрав Id
document.getElementById('textArea').style.resize = "none";