1. 1. Зображення в якості фону, яке припадають при введенні тексту.
2. 2. Placeholder в HTML5
3. 3. Placeholder, HTML5 з підтримкою старих браузерів використовуючи jQuery
4. 4. Видаляємо обведення textarea
5. 5. Заборона зміни розміру
6. 6. Додавання можливості зміни розміру
7. 7. Зміна розміру під вміст
8. 8. Nowrap
9. 9. Видаляємо скролл-бари в IE

У статті представлено кілька трюків, які ви, можливо, не знали і які ви знайдете корисними в своїх розробках.

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 поміщається весь текст, але виведеться в разі потреби.

Приклади до статті ви можете подивитися тут .