В основе этой статьи лежит следующая - . Я вношу некоторые коррективы и поправки в ту статью, меняю порядок для наглядности и понятности, а также предлагаю живые примеры. Итак.
Все предлагаемые хитрости делятся на три группы: "Базовые настройки", "Расширение возможностей с помощью jQuery" и "Решение проблемы исчезновения текста при клике". Начнём по порядку.
Базовые настройки textareaВзгляните на скриншот. На нём представлено активное поле textarea (браузер Google Crome). Устраняем его некоторые, в той или иной степени, недостатки.
Расширение возможностей с помощью jQuery
$("textarea").autoResize();
Добавляем уголок для ресайза textarea . Для этого нужен не только сам jQuery, но и jQuery UI. Лично у меня адекватно эта примочка не работала. Может стоило попробовать другую версию jQuery UI.
$("textarea").resizable();
Решение проблемы исчезновения текста в textarea при кликеРешение HTML5 - placeholder . Этот атрибут в HTML5 помешает в текстовое поле textarea (для текстовых input"ов тоже актуально) светло-серый текст, который исчезает при клике на область. Если поле осталось пустым и вы делаете его неактивным, то текст появится вновь. Это свойство работает в Safari 5, Mobile Safari, Chrome 6 и Firefox 4 alpha.
Изменяем бэкграунд textarea по клику . Для тех, у кого не работает placeholder, можно поиграться с бэкграундом. Задайте бэкграунд для текстового поля и затем настройте предлагаемый код jQuery.
Focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this).value == "") { $(this).css("background", "url(image.png) no-repeat") } });
Изменяем содержание textarea по клику - аналог placeholder на jQuery . Делается довольно просто.
$("#example-three")
.data("ShuBlog!", $("#example-three").text())
.css("color", "#ff9900")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("ShuBlog!")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("ShuBlog!");
}
});
Однако в той статье, на которую была ссылка в самом начале, скрипт был сложнее и занимался он вот чем: он проверял существует ли атрибут placeholder и в случае положительного ответа, он создавал placeholder для тега, а в случае отрицательного ответа - показанный чуть выше скрипт. Смысл этих действий я не очень понял по нескольким причинам.
Во-первых, если мы используем jQuery, то какая разница что за метод мы выберем? Не думаю, что в быстродействии это скажется. А во-вторых - placeholder имеет светлосерый текст, а если нам нужен другой цвет? В общем не ясно. Тем не менее полный скрипт приведу.
function elementSupportsAttribute(element, attribute) {
var test = document.createElement(element);
if (attribute in test) {
return true;
} else {
return false;
}
};
$(document).ready(function(){
if (!elementSupportsAttribute("textarea", "placeholder")) {
$("#example-three")
.data("originalText", $("#example-three").text())
.css("color", "#ff9900")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
}
})
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
}
});
} else {
$("#example-three")
.attr("placeholder", $("#example-three").text())
.text("");
}
});
Первые 8 строк - функция проверки существования атрибута (любого). В 10 строке мы проверяем есть ли атрибут placeholder, и в случае если нет, выполняются знакомые 11-24 строки, а если нет, то 26-28 строки. В оригинале у меня 28 строка не работала и я заменил её на упрощённую - .attr("placeholder", "originalText").
В общем это всё, что я хотел Вам сегодня рассказать. Чуть ниже ссылка с примерами.
ОписаниеHTML тег определяет многострочное текстовое поле. Количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным шрифтом.
По умолчанию поле ввода элемента , при отображении в браузере, можно растянуть (изменить его размер), потянув за нижний правый угол. Если вам нужно запретить изменение размера , то нужно прописать CSS свойство resize со значением none в атрибуте style , в этом случае получится запретить растягивать только данное поле ввода:
Либо можно прописать resize: none; в стилях, тогда правило примениться ко всем многострочным текстовым полям:
Textarea { resize: none; }
Размер текстового поля, заданный по умолчанию, может в разных браузерах быть разным. Для указания нужного размера можно воспользоваться атрибутами rows и cols или изменить ширину и высоту элемента с помощью CSS.
Между тегами и можно поместить любой текст, который будет изначально отображаться внутри текстового поля. Обратите внимание, что этот текст не исчезнет, когда поле ввода окажется в фокусе, поэтому если пользователь, при заполнении поля, не удалит данный текст, то он будет отправлен на сервер вместе с введенными данными.
Атрибуты autofocus: Указывает, что элемент автоматически получит фокус после загрузки страницы. Возможные значения логического атрибута autofocus:Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях.
Cols: Указывает положительное целое число, определяющее ширину текстового поля (единицей измерения выступает ширина одного символа). Если атрибут не указан, то используется значение по умолчанию - 20. disabled: Указывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. Возможные значения логического атрибута disabled: form: Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента .
Примечание: атрибут form не поддерживается браузером Internet Explorer.
Maxlength: Определяет максимально количество символов, которое можно будет ввести в текстовое поле.
Примечание: атрибут maxlength не поддерживается в IE9 и более ранних версия, и в Opera.
Name: Определяет имя для элемента. placeholder: Определяет короткую подсказку, которая описывает ожидаемое значение для текстового поля. Подсказка будет отображаться в текстовом поле, когда оно пустое, и исчезнет при получение им фокуса.
Примечание: атрибут placeholder не поддерживается в IE9 и более ранних версия.
Readonly: Указывает, что текстовое поле будет доступно только для чтения, т.е. текст невозможно будет изменить, но будет возможность его скопировать. Возможные значения логического атрибута readonly: required: Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер.
Примечание: атрибут required не поддерживается браузерами Internet Explorer и Safari.
Rows: Указывает положительное целое число, определяющее высоту текстового поля (единицей измерения выступает высота строки). Если атрибут не указан, то используется значение по умолчанию - 2. wrap: Определяет параметры переноса строк в тексте, при отправке данных на сервер:
- hard - браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols .
- soft - текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.
Тег так же поддерживает Глобальные атрибуты и События
Стиль по умолчанию Пример Здесь могла быть ваша реклама:)Элемент (от англ. "text area" ‒ «текстовое поле») определяет многострочное текстовое поле. Основное отличие от тега заключается в том, что допускаются переносы строк (они сохраняются при отправке данных на сервер). По умолчанию количество символов, которое можно ввести в поле не ограничено, а введенный текст отображается моноширинным начертанием.
Синтаксис ... Закрывающий тегОбязателен.
Атрибуты autocomplete HTML5 Включает или отключает автозаполнение. autofocus HTML5 Указывает, что текстовая область должна автоматически получать фокус при загрузке страницы. cols Определяет видимую ширину текстовой области (в символах). Значение по умолчанию 20 символов. dirname HTML5 Параметр, который передаёт на сервер направление текста. disabled казывает, что текстовая область будет неактивна, т.е. не будет возможности вводить текст или изменять и копировать текст, заданный по умолчанию. form HTML5 Определяет форму с которой связан элемент . В качестве значения атрибута выступает идентификатор элемента . Этот атрибут позволяет размещать многострочное текстовое поле в произвольном месте документа, а не только в качестве потомка элемента . maxlength HTML5 Определяет максимально количество символов, которое можно будет ввести в текстовое поле. minlength HTML5 Указывает минимальное количество символов, которое может содержаться в текстовой области. name Определяет имя для текстового поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. placeholder HTML5 Определяет короткую подсказку, которая описывает ожидаемое значение для текстового поля. Подсказка будет отображатся в текстовом поле, когда оно пустое, и исчезнет при получение им фокуса. readonly Устанавливает, что поле не может изменяться пользователем. required HTML5 Указывает, что текстовое поле должно быть заполнено перед отправкой формы на сервер. rows Определяет видимое количество строк в текстовой области (в символах). Значение по умолчанию 2 символа. wrap HTML5 Определяет параметры переноса строк в тексте, при отправке данных на сервер:hard ‒ браузер автоматически вставляет разрывы строки так, что каждая строка не будет иметь ширину больше, чем ширина текстового поля. Обязательным условием использования значения hard является установленный атрибут cols.
soft ‒ текст отправляется одной сплошной строкой, дополнительные переносы строк не добавляются. Является значением по умолчанию.
Для этого элемента доступны глобальные атрибуты и события .
Стилизация по умолчанию Различия между HTML 4.01 и HTML5В HTML5 тегу были добавлены новые атрибуты.
Пример использования: Пример HTML: Попробуй самОзнакомьтесь с соглашеием:
Условия нашего соглашения…Ваше мнение о этом соглашении:
Введите свой комментарий… Спецификации| WHATWG HTML Living Standard (WHATWG) | Живой стандарт | |
| HTML 4.01 (W3C) | Рекомендация | |
| HTML5 (W3C) | Рекомендация | |
| HTML 5.1 (W3C) |
| wrap=hard | wrap=off |
Существуют и другие значения этого параметра, которые поддерживаются разными браузерами, но результат их использования похож на приведенные выше значения.
Значение по умолчанию
off
Пример 7. Переносы в текстовом поле
