Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
JavaScript и Jquery /

Трюки с textarea

  • Суббота, 6 ноября 2011, 20:25 |
  • Автор: karpovi4 |
  • Просмотров: 3385 |
  • Комментарии: 3 |
  • В закладки:
В статье представлено несколько интересных примеров работы с texarea, о которых вы даже могли и не подозревать.

Изображение в качестве фона, которое пропадает при вводе текста
Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для 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");
        }
    });


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.


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("");
}


Удаляем обводку textarea
Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea, когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance, либо можно просто установить элементу бордер или фон.
textarea {
    outline: none;
    -moz-appearance: none;
    border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */
}


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


Удаляем скролбары в IE
Непонятный мне IE показывает вертикальный скролбар для всех textarea. Вы можете их спрятать используя overflow: hidden, но в таком случае он не будет показываться при увеличении контента. Что тоже не гуд. Поэтому правильнее использовать этот подход:
textarea {
    overflow: auto;
}
Интересно тем, что скролбар не будет отобрадаться когда в textarea помещается весь текст, но выведется в случае необходимости.
Добавить комментарий