(x)HTML/WML/CSS | 9 хитростей html-тега textarea!
В основе этой статьи лежит следующая - Textarea Tricks. Я вношу некоторые коррективы и поправки в ту статью, меняю порядок для наглядности и понятности, а также предлагаю живые примеры. Итак.
Все предлагаемые хитрости делятся на три группы: "Базовые настройки", "Расширение возможностей с помощью jQuery" и "Решение проблемы исчезновения текста при клике". Начнём по порядку.
Базовые настройки textarea
Взгляните на скриншот. На нём представлено активное поле textarea (браузер Google Crome). Устраняем его некоторые, в той или иной степени, недостатки.
Убираем обводку вокруг textarea. Во многих браузерах при клике на поле появляется обводка. Она может быть голубой, может быть жёлтой, может быть точечной, в любом случае она порой настолько не в тему, что хоть на стену лезь. Тем не менее, убрать её довольно просто - подобный образом убирали обводку вокруг ссылок.
Убираем уголок ресайза. В Google Chrome (возможно ещё в некоторых браузерах) всем полям textarea автоматически в нижнем правом углу приделывается уголок для ресайза. Чтобы этого не было, нужно прописать:
Убираем полосы прокрутки в Internet Explorer. Даже если в поле textarea ничего нет, всеми "любимый" ишак всё равно показывает полосы прокрутки (неактивные). Чтобы их не было, прописываем следующее:
Задаём NOWRAP. Иногда в textatea'х необхоимо сделать так, чтобы не было переносов (например, когда работаем с кодом css). Чтобы переносов не было, надо прописать свойство для текстарии.
Расширение возможностей с помощью jQuery
Авторесайз textarea в зависимости от объёма контента. James Padolsey сделал скрипт для jQuery, который это делает (ссылка).
$('textarea').autoResize();
Добавляем уголок для ресайза textarea. Для этого нужен не только сам jQuery, но и jQuery UI. Лично у меня адекватно эта примочка не работала. Может стоило попробовать другую версию jQuery UI.
$("textarea").resizable();
[h3]Решение проблемы исчезновения текста в textarea при клике[/h3]
Решение HTML5 - placeholder. Этот атрибут в HTML5 помешает в текстовое поле textarea (для текстовых input'ов тоже актуально) светло-серый текст, который исчезает при клике на область. Если поле осталось пустым и вы делаете его неактивным, то текст появится вновь. Это свойство работает в Safari 5, Mobile Safari, Chrome 6 и Firefox 4 alpha.
Изменяем бэкграунд textarea по клику. Для тех, у кого не работает placeholder, можно поиграться с бэкграундом. Задайте бэкграунд для текстового поля и затем настройте предлагаемый код jQuery.
Изменяем содержание textarea по клику - аналог placeholder на jQuery. Делается довольно просто.
Однако в той статье, на которую была ссылка в самом начале, скрипт был сложнее и занимался он вот чем: он проверял существует ли атрибут placeholder и в случае положительного ответа, он создавал placeholder для тега, а в случае отрицательного ответа - показанный чуть выше скрипт. Смысл этих действий я не очень понял по нескольким причинам.
Во-первых, если мы используем jQuery, то какая разница что за метод мы выберем? Не думаю, что в быстродействии это скажется. А во-вторых - placeholder имеет светлосерый текст, а если нам нужен другой цвет? В общем не ясно. Тем не менее полный скрипт приведу.
Первые 8 строк - функция проверки существования атрибута (любого). В 10 строке мы проверяем есть ли атрибут placeholder, и в случае если нет, выполняются знакомые 11-24 строки, а если нет, то 26-28 строки. В оригинале у меня 28 строка не работала и я заменил её на упрощённую - .attr("placeholder", 'originalText').
В общем это всё, что я хотел Вам сегодня рассказать. Чуть ниже ссылка с примерами.
Пример
Источник: Хомяк
________
посл. ред. 29.01.2017 в 05:56; всего 1 раз(а); by 195397020
195397020 Все предлагаемые хитрости делятся на три группы: "Базовые настройки", "Расширение возможностей с помощью jQuery" и "Решение проблемы исчезновения текста при клике". Начнём по порядку.
Базовые настройки textarea
Взгляните на скриншот. На нём представлено активное поле textarea (браузер Google Crome). Устраняем его некоторые, в той или иной степени, недостатки.
Убираем обводку вокруг textarea. Во многих браузерах при клике на поле появляется обводка. Она может быть голубой, может быть жёлтой, может быть точечной, в любом случае она порой настолько не в тему, что хоть на стену лезь. Тем не менее, убрать её довольно просто - подобный образом убирали обводку вокруг ссылок.
textarea {
outline: none;
}
outline: none;
}
Убираем уголок ресайза. В Google Chrome (возможно ещё в некоторых браузерах) всем полям textarea автоматически в нижнем правом углу приделывается уголок для ресайза. Чтобы этого не было, нужно прописать:
textarea {
resize: none;
}
resize: none;
}
Убираем полосы прокрутки в Internet Explorer. Даже если в поле textarea ничего нет, всеми "любимый" ишак всё равно показывает полосы прокрутки (неактивные). Чтобы их не было, прописываем следующее:
textarea {
overflow: auto;
}
overflow: auto;
}
Задаём NOWRAP. Иногда в textatea'х необхоимо сделать так, чтобы не было переносов (например, когда работаем с кодом css). Чтобы переносов не было, надо прописать свойство для текстарии.
<textarea wrap="off"></textarea>
Расширение возможностей с помощью jQuery
Авторесайз textarea в зависимости от объёма контента. James Padolsey сделал скрипт для jQuery, который это делает (ссылка).
$('textarea').autoResize();
Добавляем уголок для ресайза textarea. Для этого нужен не только сам jQuery, но и jQuery UI. Лично у меня адекватно эта примочка не работала. Может стоило попробовать другую версию jQuery UI.
$("textarea").resizable();
[h3]Решение проблемы исчезновения текста в textarea при клике[/h3]
Решение HTML5 - placeholder. Этот атрибут в HTML5 помешает в текстовое поле textarea (для текстовых input'ов тоже актуально) светло-серый текст, который исчезает при клике на область. Если поле осталось пустым и вы делаете его неактивным, то текст появится вновь. Это свойство работает в Safari 5, Mobile Safari, Chrome 6 и Firefox 4 alpha.
<textarea placeholder="ShuBlog!"></textarea>
Изменяем бэкграунд textarea по клику. Для тех, у кого не работает placeholder, можно поиграться с бэкграундом. Задайте бэкграунд для текстового поля и затем настройте предлагаемый код jQuery.
$('textarea')
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(image.png) no-repeat") } });
.focus(function() { $(this).css("background", "none") })
.blur(function() { if ($(this)[0].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!");
}
});
.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("");
}
});
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').
В общем это всё, что я хотел Вам сегодня рассказать. Чуть ниже ссылка с примерами.
Пример
Источник: Хомяк
________
посл. ред. 29.01.2017 в 05:56; всего 1 раз(а); by 195397020
Пс залил в библу бумаса, а она поломано кривая как у моей прапра бубушки мудя. 
195397020, в чужие мудя смотришь?
409147696 (29.01.2017 в 06:02)
195397020, в чужие мудя смотришь?
195397020, в чужие мудя смотришь?
в какие мудя?
195397020, а она поломано кривая как у моей прапра бубушки мудя.
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
409147696 (29.01.2017 в 06:19)
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
лолик че не со своего ака ляль
195397020 (29.01.2017 в 06:22)
409147696 (29.01.2017 в 06:19)
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
лолик че не со своего ака ляль
409147696 (29.01.2017 в 06:19)
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
лолик че не со своего ака ляль
с какого?
409147696 (29.01.2017 в 06:58)
195397020 (29.01.2017 в 06:22)
409147696 (29.01.2017 в 06:19)
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
лолик че не со своего ака ляль
с какого?
195397020 (29.01.2017 в 06:22)
409147696 (29.01.2017 в 06:19)
195397020 (29.01.2017 в 06:17)
409147696 (29.01.2017 в 06:07)
195397020, а она поломано кривая как у моей прапра бубушки мудя.
это к слову додик , лолик
сам такой
лолик че не со своего ака ляль
с какого?
сказки не рассказывай
Стр.: 1, 2
