Трюки с 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 помещается весь текст, но выведется в случае необходимости.

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

Опубликовано: 20.07.2010 Просмотров 137549 Ссылка на оригинал Tweet it!
22 comments  

Чистяков Денис

2010.07.20 11:41

 Спасибо за обзор, может еще подскажите как у Оперы убрать скролл бар, ей оверфлоу - авто не помогает (

И почему не убирать бекграунд с плейсхолдером по CSS псевдоселектору ":focus" он прекрасно работает во всех браузерах, и даже в ИЕ6 если мне память не изменяет.
 

basilkot

2010.07.20 12:58

  • По поводу opera. у меня версия 10.60, работает как и ожидается.

Чистяков Денис

2010.07.20 11:44

 Простите немного наврал в IE6-7 не работает, если верить <a href="http://www.htmlbook.ru/css/focus.html">htmlbook'у</a>, но для них бы я сделал классы-модификаторы "focus".
 

basilkot

2010.07.20 11:54

  • с фокусом то получится, а как быть когда введён текст? в любом случае придётся писать jQuery

Чистяков Денис

2010.07.20 12:57

 @basilkot
Да, что-то я по ходу перегрелся от жары :-[
 

paska

2010.08.23 23:37

 по поводу overflow: auto. в ИЕ то работат, а вот в opera 9.2 - нет. можно конечно сказать - ну и хрен с ней. но хотелось бы найти решение.
 

basilkot

2010.08.24 00:20

  • видимо, с помощью CSS никак.

    Но если шибко хочется можно сделать с помощью javaScript/jQuery, таким образом:
    для textarea задаёшь overflow: hidden.
    потом создаёшь теневой div, у которого все параметры шрифта, а также паддинги такие же, кроме того display должен быть inline-block. затем при изменении текста сравниваешь высоту этого div-а с высотой textarea, если она больше, то меняешь у textarea свойство overflow в scroll/auto.

    должно сработать, если будешь делать так, то поделись, получилось ли :)

han73r

2010.10.16 22:25

 Не работает
Add Resize Handle (jQuery UI)
Включил jquery
<script src="jquery-ui.js"></script>

шестой
$("#example-six").resizable();

textarea
<div class="ui-wrapper" style="overflow: hidden; position: relative; width: 422px; height: 119px; top: 0px; left: 0px; margin: 0px; padding-right: 7px; padding-bottom: 16px;"><textarea style="position: static; display: block; height: 97px; width: 400px;" class="ui-resizable" id="example-six" cols="30" rows="5"></textarea><div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div><div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div><div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div></div>

В DW видны изменяемые поля - в браузере уже нет, и нет той галочки, за которую можно дергать как в примере, помогите, в чем ошибка?
 

basilkot

2010.10.16 22:50

  • Привет,

    честно говоря у меня шестой пример работает во всех браузерах. я даже не могу предположить в чём может быть проблема.

    а пример из статьи тоже не работает?

han73r

2010.10.16 22:39

 поправка к предыдущему сабжу - работает только в гугл хром, в опере, IE и FX не работает(
а в гугл хроме не работает 3 пример %)
 

basilkot

2010.10.16 22:51

  • можем, кстати, продолжить обсуждение по почте, пиши на basilkot на гугле.

Hello_O

2011.03.27 01:40

 Отличная статья)..
Главное все по-существу)..
 

bearkid

2011.04.18 13:13

 по поводу "5. Запрет изменения размера" на текстарею можно задать max-width и max-height, ну и width и height также.
 

Alexey

2011.06.21 14:46

 Весьма надёжный плагин для автоувеличения textarea:
http://plugins.jquery.com/project/autogrowtextarea
 

WeB XaSeR

2011.09.21 19:39

 Спасибо за такую интересную подборку. Placeholder и запрет изменения окна мне пригодились...
 

FT

2011.12.14 06:50

 Доброе, не подскажете как можно содержание textarea продублировать в другое textarea, т.е. одновременное заполнение сразу 2х полей одним тем же контентом?
 

Аноним

2012.01.07 18:57

 FT, это можно реализовать в JQuery
 

Аль

2012.02.24 02:31

 Пригодилось, спасибо! :)
 

Denis

2012.04.19 23:25

 Спасибо!
 

Иван

2013.05.25 19:02

 Большое вам спасибо за статью!Помогли!
 

Благодарный

2013.09.12 21:43

 Спасибо! Очень полезная инфа!
 

Не представился

2014.05.04 14:05

 Посетите наш сайт <a href=http://partnerka-fx.ru/>форекс для начинающих онлайн</a>
 

максим

2014.05.27 21:09

 пришел за 5 пунктом, все работает, спасибо!)
заинтересовался 1 пунктом, но не понял как его реализовать. что делать с этим пхп кодом?
 

basilkot

2014.05.27 21:14

  • это не пхп, яваскрипт

Алексей

2014.07.24 13:12

 Доброго времени суток, подскажите, пожалуйста, как сделать border-radius для textarea в Opera?
В Chrome & FireFox - работает, а вот опера подводит.
 

Анжелика

2015.04.13 16:35

 Спасибо большое за resize: none; !
 

Не представился

2016.09.06 02:27

 <b></b>
 

Не представился

2016.10.18 09:20




 

Оставить после себя комментарий

user

2016.11.20

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!