Трюки с textarea

В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.

1. Изображение в качестве фона, которое пропадает при вводе текста.

Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.

textarea {
	background	: url(images/benice.png) center center no-repeat;
	border		: 1px solid #888;
}

Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:

$('textarea')
	.focus(function() { 
		$(this).css("background", "none"); 
	})
	.blur(function() { 
		if ($(this)[0].value == '') { 
			$(this).css("background", "url(images/benice.png) center center no-repeat"); 
		} 
	});

2. Placeholder в HTML5

В HTML5 появился новый атрибут, называемый placeholder. Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Placeholder, HTML5 с поддержкой старых браузеров используя jQuery

Самый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:

function elementSupportsAttribute(element, attribute) {
	var test = document.createElement(element);
	return (attribute in test);
};

Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder.

if (!elementSupportsAttribute('textarea', 'placeholder')) {
	// Если браузер не поддерживает атрибут, то выполняется код jQuery
	$("#example-three")
		.data("originalText", $("#example-three").text())
		.css("color", "#999")
		.focus(function() {
		var $el = $(this);
		if (this.value == $el.data("originalText")) {
			this.value = "";
		}
	})
	.blur(function() {
		if (this.value == "") {
			this.value = $(this).data("originalText");
		}
	});
} else {
	// Если же браузер поддерживает HTML5, то просто используем эту возможность
	$("#example-three")
		.attr("placeholder", $("#example-three").text())
		.text("");
}

4. Удаляем обводку textarea

Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.

textarea {
	outline: none;
	-moz-appearance: none;
	border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */
}

5. Запрет изменения размера

Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:

textarea {
	resize: none;
}

6. Добавление возможности изменения размера

jQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:

$("textarea").resizable();

7. Изменение размера под содержимое

James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот. Плагин содержит много настроек, но самый простой способ его использовать это:

$('textarea').autoResize();

8. Nowrap

Чтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space, которое не работает с textarea. Для textarea необходимо использовать атрибут wrap.

<textarea wrap="off" cols="30" rows="5"></textarea>

9. Удаляем скролл-бары в IE

IE показывает вертикальный скролл-бар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:

textarea {
	overflow: auto;
}

В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.

Примеры к статье вы можете посмотреть здесь.

{{ title }}
  • {{ m.username }}{не представился} {{m.date}}

    {{ m.text }}

    • {{ child.username }} {{child.date}}

      {{ child.text }}

Высказаться по теме

user

2017.12.16

\r\n\r\nшестой \r\n$(\"#example-six\").resizable();\r\n\r\ntextarea\r\n\t\t
\r\n\r\nВ DW видны изменяемые поля - в браузере уже нет, и нет той галочки, за которую можно дергать как в примере, помогите, в чем ошибка?","date":"2010.10.16 22:25","username":"han73r","avatar":"http://www.gravatar.com/avatar/5eee3c6b4201ed13979c54eb79a4ae17?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":66,"parentId":null,"text":"поправка к предыдущему сабжу - работает только в гугл хром, в опере, IE и FX не работает( \r\nа в гугл хроме не работает 3 пример %) ","date":"2010.10.16 22:39","username":"han73r","avatar":"http://www.gravatar.com/avatar/5eee3c6b4201ed13979c54eb79a4ae17?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":384,"parentId":65,"text":"Привет,\r\n\r\nчестно говоря у меня шестой пример работает во всех браузерах. я даже не могу предположить в чём может быть проблема.\r\n\r\nа пример из статьи тоже не работает?","date":"2010.10.16 22:50","username":"basilkot","avatar":"http://www.gravatar.com/avatar/a4f26b049c5bdf06f9b1d9e6b1661753?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":385,"parentId":66,"text":"можем, кстати, продолжить обсуждение по почте, пиши на basilkot на гугле.","date":"2010.10.16 22:51","username":"basilkot","avatar":"http://www.gravatar.com/avatar/a4f26b049c5bdf06f9b1d9e6b1661753?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":382,"parentId":null,"text":"Отличная статья)..\r\nГлавное все по-существу)..","date":"2011.03.27 01:40","username":"Hello_O","avatar":"/Content/images/theme/user.png"},{"id":390,"parentId":null,"text":"по поводу \"5. Запрет изменения размера\" на текстарею можно задать max-width и max-height, ну и width и height также.","date":"2011.04.18 13:13","username":"bearkid","avatar":"http://www.gravatar.com/avatar/54fe334df65840eb73010ac9605ca02d?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":391,"parentId":null,"text":"Весьма надёжный плагин для автоувеличения textarea:\r\nhttp://plugins.jquery.com/project/autogrowtextarea","date":"2011.06.21 14:46","username":"Alexey","avatar":"/Content/images/theme/user.png"},{"id":389,"parentId":null,"text":"Спасибо за такую интересную подборку. Placeholder и запрет изменения окна мне пригодились...","date":"2011.09.21 19:39","username":"WeB XaSeR","avatar":"http://www.gravatar.com/avatar/6d865c0b7d679465c48db353a2d00327?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":388,"parentId":null,"text":"Доброе, не подскажете как можно содержание textarea продублировать в другое textarea, т.е. одновременное заполнение сразу 2х полей одним тем же контентом?","date":"2011.12.14 06:50","username":"FT","avatar":"http://www.gravatar.com/avatar/770e4a52da92bc84674dbcadd517aef1?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":387,"parentId":null,"text":"FT, это можно реализовать в JQuery","date":"2012.01.07 18:57","username":"Аноним","avatar":"http://www.gravatar.com/avatar/95b85b5d24ca552804fae05818078511?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":393,"parentId":null,"text":"Пригодилось, спасибо! :)","date":"2012.02.24 02:31","username":"Аль","avatar":"/Content/images/theme/user.png"},{"id":394,"parentId":null,"text":"Спасибо!","date":"2012.04.19 23:25","username":"Denis","avatar":"http://www.gravatar.com/avatar/af9f1f78571c443bad8c2114072ce2ee?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":395,"parentId":null,"text":"Большое вам спасибо за статью!Помогли!","date":"2013.05.25 19:02","username":"Иван","avatar":"http://www.gravatar.com/avatar/a128c4d72a76e659ef99bb90e2b70932?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":396,"parentId":null,"text":"Спасибо! Очень полезная инфа! ","date":"2013.09.12 21:43","username":"Благодарный","avatar":"/Content/images/theme/user.png"},{"id":397,"parentId":null,"text":"Посетите наш сайт форекс для начинающих онлайн","date":"2014.05.04 14:05","username":"","avatar":"http://www.gravatar.com/avatar/5abc26cd24cf932d3b45d1689aa1e68b?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":67,"parentId":null,"text":"пришел за 5 пунктом, все работает, спасибо!)\r\nзаинтересовался 1 пунктом, но не понял как его реализовать. что делать с этим пхп кодом?","date":"2014.05.27 21:09","username":"максим","avatar":"/Content/images/theme/user.png"},{"id":399,"parentId":67,"text":"это не пхп, яваскрипт","date":"2014.05.27 21:14","username":"basilkot","avatar":"http://www.gravatar.com/avatar/a4f26b049c5bdf06f9b1d9e6b1661753?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":398,"parentId":null,"text":"Доброго времени суток, подскажите, пожалуйста, как сделать border-radius для textarea в Opera?\r\nВ Chrome & FireFox - работает, а вот опера подводит.","date":"2014.07.24 13:12","username":"Алексей","avatar":"http://www.gravatar.com/avatar/f28ee077a6787776f6251d700ce87981?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"},{"id":402,"parentId":null,"text":"Спасибо большое за resize: none; ! ","date":"2015.04.13 16:35","username":"Анжелика","avatar":"http://www.gravatar.com/avatar/9303d339543f6aef5eea039dd6165488?s=60&d=http%3a%2f%2fwww.css-tricks.ru%2fContent%2fimages%2fTheme%2fuser.png"}];