Как запретить изменение размеров textarea на CSS/jQuery?

Textarea – это поле для ввода различной информации на вашем сайте, и, в отличие от похожего тега «input», информация вводиться не в строку, а в столбец.

И по умолчанию – в нижнем правом углу этого поля есть небольшой уголок, который позволяет пользователю изменить размеры этого окна.

С одной стороны, это полезная функция, ведь пользователь при написании в это поле большого сообщения может изменить его размеры для того, что было визуально комфортнее воспринимать введенный текст, а с другой – не очень, так как из-за изменения размеров этого окна самим пользователем у вас может в прямом смысле «поехать» дизайн.

Поэтому в каких-то случаях нужно оградить пользователя от этой функции. Как именно – я сейчас расскажу.

Как запретить изменение размеров textarea на CSS?

Поставленная задача на CSS решается очень просто. Для этого нужно воспользоваться свойством «resize»:

<textarea id="content" name="content"></textarea>

<style>
	#content {
		resize: none;
		width: 100%;
		height: 150px;
	}
</style>

С другой стороны, если вы все же хотите оставить возможность «растягивания» поля – вы можете воспользоваться свойствами «max-width» и «max-height»:

<textarea id="content" name="content"></textarea>

<style>
	#content {
		max-width: 400px;
		max-height: 300px;
	}
</style>

В таком случае растягивание поля разрешено, но только до указанных размеров.

Как запретить изменение размеров textarea на jQuery?

На jQuery эти же задачи решаются с помощью метода «css». Для полного запрета изменения размеров:

<textarea id="content" name="content"></textarea>

<script>

	$(function() {

		$("#content").css({
			"resize": "none"
		});

	});

</script>

И для частичного ограничения соответственно:

<textarea id="content" name="content"></textarea>

<script>

	$(function() {

		$("#content").css({
			"max-width": "400px", 
			"max-height": "300px"
		});

	});

</script>

Если вдруг какой-то из способов вам показался непонятным – пишите об этом в комментариях.