Трюки с текстовым полем

Эх, текстовые поля. Сколько всяких причуд есть у вас. Представляю вам подборку из девяти “трюков”, которые могут вам пригодиться.

1. Фоновое изображения для текстового поля, которое исчезает при вводе текста.

Вы можете добавить фоновую картинку к вашему текстовому полю или любой другой элемент. Например, на изображении ниже, фоновая картинка просит пользователей быть добрыми.Если вы добавите фоновую картинку, то это может “уничтожить” стандартный стиль браузера для текстового поля. По умолчанию стандартная однопиксельная рамка, вокруг текстового поля, будет заменена на толстую границу. Для того, чтобы вернуть стандартный стиль браузера, вы можете просто задать стиль границы в css.

/* css code */
textarea {
  background: url(images/benice.png) center center no-repeat; /* Данный код разрушит стандартную рамку */
  border: 1px solid #888;
}

В этом примере фоновое изображение будет влиять на читаемость текста, если текст зайдёт на надпись на рисунке, то у пользователя возникнут проблемы с его чтением.Поэтому, мы используем следующий код, основанный на фреймворке jQuery, для того, чтобы убирать фоновое изображение при клике на текстовое поле и возвращать его только тогда, когда текстовое поле абсолютно пустое.

/* jQuery code */
$('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. Замещающий текст (HTML5)

Placeholder – это новый атрибут в html 5, который показывает серый текст, заданный данным атрибутом, (он также работает для текстовых полей с атрибутом text-style), но этот эффект исчезает когда поле начинают редактировать или принимает какое-либо значение.

<!-- HTML code -->
<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

Однако, у этого способа есть пока один временный минус – он работает только в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.

3. Замещающий текст (HTML5 и jQuery)

С лёгкостью проверим, поддерживает ли конкретный элемент атрибут placeholder используя JavaScript.

// JavaScript code
function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

Затем мы можем написать код так, что если браузер поддерживает атрибут placeholder, то мы будем использовать данный атрибут, а если браузер его не поддерживает, то воспользуемся jQuery скриптом.

// JavaScript code
if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Если браузер не поддерживает атрибут 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 {
  // Браузер поддерживает атрибут placeholder, поэтому используем его
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. Удаление голубой рамки

Все браузеры использующие WebKit, Firefox 3.6 и Opera 10 добавляют голубую рамку вокруг текстового поля на время его редактирования. Мы можем убрать её из всех WebKit браузеров используя следующий код:

/* CSS code */
textarea {
  outline: none;
}

Вы можете применить этот стиль к :focus, т.к. это работает в любом случае. Я ещё не нашёл способа, чтобы удалить рамку либо из Firefox, либо из Opera, но css атрибут -moz-outline-style был последним, который я проверил.

Напоминание: Голубая рамка выглядит более жирно, в отличии от стандартной, и, если нарушить этот стандарт, то это вызовет неудобства у ваших пользователей. Если вы всё же нарушите это правило, то у вас должна быть веская причина на это и стиль для :focus должен быть не менее жирным, в отличии от стандартного.

5. Удаление маркера изменения размера текстового поля

Браузеры использующие WebKit добавляю небольшой элемент пользовательского интерфейса (UI) в правый нижний угол текстового поля, с помощью которого пользователи могут изменять размер поля методом “нажал и перетащил”. Если у вас есть веская причина, чтобы лишить пользователей этой возможности, то используйте следующий css стиль:

/* CSS code */
textarea {
  resize: none;
}

6. Добавление маркера изменения размера текстового поля

jQuery UI имеет функцию для изменения размера, которая может быть применена и к текстовым полям. Этот метод работает во всех браузерах, замещая данную функцию в WebKit браузерах.

Для использования этого метода, вам необходимо подключить jQuery, jQuery UI и добавить следующий простейший код:

// JavaScript code
$("textarea").resizable();

7. Автоматическое изменение размера соответственно введённому тексту

Джеймс Падолси написал отличный jQuery скрипт для автоматического изменения размера текстовых полей. Скрипт настолько прост, насколько большой отрывок кода вам необходимо будет добавить: изначально текстовое поле имеет обычный (заданный) размер, но при вводе текста оно начинает расширяться таким образом, чтобы весь введённый текст был виден вам без всяких полос прокрутки, однако ограничение на высоту всё же есть – при достижении максимальной высоты (по умолчанию 1000 пикселей, но можно задать свой размер) – появляется полоса прокрутки.

Этот скрипт имеет несколько различных опций, но чтобы начать его использовать вам достаточно подключить jQuery, файл скрипта, который вы можете скачать по ссылке выше, и выполнить следующий код:

 // JavaScript code
$('textarea').autoResize();

8. Отключение автоматичесокго переноса

Чтобы текст не переносился автоматически, вы используйте #whatever { white-space: nowrap; }. Но почему-то это не работает с текстовыми полями. Если вы хотите, чтобы текст не переносился автоматически пока вы не нажмёте клавишу “Enter”, то используйте html-атрибут wrap=”off”.

 <!-- HTML code -->
<textarea wrap="off" cols="30" rows="5"></textarea>

9. Избавляемся от стандартных полос прокрутки в Internet Explorer

IE puts a vertical scrollbar by default on all textareas. You can hid it with overflow: hidden, but then you don’t get any scrollbars at all when you expand. Thankfully auto overflow works to remove the scrollbar but still put them back when needed.
IE по умолчанию добавляет вертикальную полосу прокрутки на все текстовые поля. Вы можете убрать их добавив css-свойство overflow: hidden.

/* CSS code */
textarea {
  overflow: auto;
}

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

Ссылка на оригинал статьи.

Как вам перевод? Это мой второй перевод, но с этим было труднее. Некоторые моменты сократил, некоторые описал подробнее. Все недочёты в переводе пишите в комментарии – постараюсь исправить и скорее набраться опыта в переводах.