Реализация placeholder в asp:TextBox с HTML и CSS

Быстрый ответ

Для того чтобы активировать подсказку в ASP:TextBox, следует использовать атрибут placeholder таким образом:

<asp:TextBox ID="YourTextBoxID" runat="server" placeholder="Введите текст"></asp:TextBox>

Таким образом, в поле для ввода появится утонченная светло-серая подсказка, исчезающая при начале ввода данных пользователем. Не стоит беспокоиться, если placeholder не отображается в IntelliSense — он всё равно будет работать!

Расширенное использование подсказок для ввода

Введение: программное добавление placeholders

Если надо динамически менять текст подсказки, применяйте AttributeCollection в коде обработчиков событий:

// Кодирование — это как магия без волшебных палочек.
TextBox1.Attributes["placeholder"] = "Введите текст";

Подробнее об этом расскажет наш спикер на видео

Поддержка различных языков с помощью meta:resourcekey

Для международных приложений важен функционал предоставления переводов подсказок. Локализируйте текст для placeholder через meta:resourcekey, синхронизируя его с ресурсными файлами:

<asp:TextBox ID="LocalizedTextBox" runat="server" meta:resourcekey="LocalizedTextBoxResource1"></asp:TextBox>

Внимание к деталям: кроссбраузерность

Гарантированный корректный вывод placeholder в разнообразных браузерах и на различных устройствах позволит каждому пользователю получить качественный интерфейс.

Идем дальше обычных подсказок

Стилизация placeholders с помощью CSS

Оформите placeholders стильно с помощью CSS, чтобы они соответствовали вашему бренду:

::placeholder {
  color: red;
  font-style: italic;
  /* Кто говорил, что красный курсив не может стать новым черным? */
}

HTML и CSS: когда ASP под рукой не подходит

Для реализации подобной функциональности без asp:TextBox можно использовать обычный HTML и CSS:

<input type="text" id="htmlTextBox" placeholder="Введите текст" />

Он обеспечит больше гибкости в оформлении и работе с CSS и JavaScript.

Подсказки со стартовым значением

Чтобы максимально информировать пользователя, примените атрибут value в качестве подсказки. Не забудьте очистить его при получении фокуса:

<asp:TextBox ID="YourTextBox" runat="server" Text="Начальная подсказка"></asp:TextBox>

Имитируйте поведение placeholder:

document.getElementById('YourTextBox').addEventListener('focus', function(e) {
  if (this.value === 'Начальная подсказка') {
    this.value = '';
    /* Все почести подсказкам, без них мы бы потерялись. */
  }
});

Визуализация

Воспринимайте placeholders в качестве тонких направляющих меток💡, размещаемых внутри контейнера📦, указывающих, что вводить:

📦 <--- TextBox
💡 <--- Подсказка placeholder

<asp:TextBox ID="TextBox1" runat="server" Text="" placeholder="Введите подсказку..."></asp:TextBox>

До: TextBox тактно указывает на необходимость ввода данных.

После: Пользователь начинает ввод, и подсказка бесследно исчезает.

Чек-лист использования placeholders

Усиление UI/UX

Placeholders должны оставаться не только стильными, но и поднимать уровень удобства и понятности интерфейса, быть краткими и содержательными.

Единообразие и эстетика

Соблюдайте принципы адаптивного дизайна для обеспечения единообразия интеракции с placeholder на различных устройствах и разрешениях экрана.

Всестороннее тестирование

Регулярно тестируйте ваши подсказки placeholder в разнообразных браузерах и на разных устройствах.

Полезные материалы

1. Класс TextBox (System.Web.UI.WebControls) | Microsoft Learn — Обширная документация к элементу управления TextBox в ASP.NET.
2. Использование атрибута placeholder в ASP.NET Web Forms — Полезные советы Stack Overflow по работе с placeholders в ASP.NET.
3. HTML атрибут placeholder для input — Вводная статья об использовании атрибута placeholder в HTML от W3Schools.
4. jQuery-placeholder плагин — Дополнительные возможности функционала HTML5 placeholder для старых браузеров.
5. WebAIM: Создание доступных форм — Рекомендации по созданию доступных форм в ASP.NET.
6. Placeholders в полях форм могут быть вредны — Обоснование от Nielsen Norman Group о неприемлемости использования placeholder в полях форм.