Хак с Form API в Drupal 7: создаём HTML5‑поля (number, email, tel) без лишних модулей

Drupal 7 предлагает мощный Form API для построения форм. Однако при работе с HTML5‑атрибутами можно столкнуться с неожиданным ограничением: если вы попытаетесь задать тип поля numberemail или tel стандартным способом, Drupal проигнорирует ваше значение и оставит тип text (или тот, который определён через #type).

Рассмотрим ситуацию: нам нужно поле для ввода числа с шагом 10 и ограничениями от 0 до 100. Логично использовать HTML5‑тип number:

Но на выходе мы получим <input type="text" ...>. Почему? Потому что Drupal при рендеринге элемента проставляет тип, основываясь на #type (в данном случае textfield), и атрибут type из #attributes перезаписывается внутренним значением.

Опытные разработчики Drupal 7 знают небольшой хак: если добавить пробел в начало ключа атрибута, Drupal не сможет его сопоставить со своим внутренним списком и просто склеит все атрибуты в итоговом теге. В результате в HTML появятся два атрибута type.

После рендеринга получится примерно такой HTML:

Когда мы добавляем в #attributes элемент с ключом ' type' (с пробелом), Drupal воспринимает его как обычный атрибут, но из-за пробела в имени ключа внутренний механизм Form API не распознаёт его как атрибут type, подлежащий перезаписи. Однако при финальном рендеринге функция drupal_attributes() обрабатывает массив атрибутов и обрезает пробелы в именах ключей. В результате в итоговой разметке атрибут появляется уже без пробела, как обычный type="number".

Как это работает?

Можно заметить интересную деталь: в реальном HTML-коде, который генерирует Drupal, наш атрибут type="number" появляется до стандартного type="text", а не после, как можно было бы ожидать. При этом поле всё равно работает как числовое. Давайте разберёмся почему так происходит, и почему хак не перестаёт работать из-за повторяющихся атрибутов.

Формально это невалидный HTML — атрибут не должен повторяться. Однако браузеры при разборе HTML достаточно либеральны и, как правило, применяют первое встретившееся значение атрибута, игнорируя последующие. В нашем случае браузер видит сначала type="number" и создаёт числовое поле, а второй type="text" просто не оказывает влияния. Именно поэтому хак работает, даже если стандартный type идёт после.

Конечно, поведение браузеров в такой ситуации чётко не специфицировано, и разные версии или браузеры могут теоретически обрабатывать это иначе. Но многолетняя практика использования этого приёма в Drupal 7 показывает, что во всех современных браузерах (Chrome, Firefox, Safari, Edge) поле становится именно того типа, который указан первым.

Мало букафф? Читайте есчо !

Удаление nodequeue программно

Май 28, 2021 г.

Небольшой сниппет (snippet) по удалению сущностей nodequeue из кода. Может быть полезно при миграции данных. Удобно оперировать с машинным именем нод-кью, но функция удаления требует ID, потому код обычно обретает следующие формы: [crayon-69d69e9d681b8388365845/] ...

Читать

Удаление поля из entity в Drupal программно

Январь 10, 2020 г.

Обычно такой код требуется писать в файлах .install, для модификации структуры ваших полей при обновлении модуля, чтобы не проделывать эту операцию вручную. Также предварительно стоит подумать о переносе данных из удаляемого поля в какое то новое место. ...

Читать

Ctools modal закрытие при клике вне модального окна

Июнь 28, 2019 г.

Привычное для пользователей поведение модального окна изначально не реализовано в ctools. Давайте добавим немного js, реализующего нужный функционал. Код универсален для модального окна создаваемого ctools, т.к. привязан к верстке окна: [crayon-69d69e9d6843e137652274/] ...

Читать

Error: Class 'Aws\S3\StreamWrapper' not found (Drupal 7)

Август 29, 2022 г.

При обновлении модуля s3fs с ветки 7.x-2.x -> 7.x->3.x друпалу не удаётся найти указанный класс. Все необходимые шаги по апгрейду сделаны, как описано в readme.txt модуля. Это проблема инициализации библиотеки awssdk в s3fs_libraries_info(). Drupal ...

Читать
 

Комментарии к «Хак с Form API в Drupal 7: создаём HTML5‑поля (number, email, tel) без лишних модулей»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: