Как добавить призрачный текст в текстовую область веб-формы Drupal?

Я хотел бы знать, кто-нибудь знает, как добавить призрачный (светло-серый) текст в текстовую область веб-формы Drupal, чтобы дать описание? Призрачный текст должен исчезнуть, как только пользователь введет что-то в текстовую область.


php textarea drupal drupal-webform
person Pink Jazz    schedule 20.02.2013    source источник
comment
Вы сами программируете поле? Вы просто хотите создать форму в drupal и иметь опцию в модуле полей? Этот модуль может помочь вам, если вы сами его программируете: drupal.org/project/placeholder   -  person Green Black    schedule 21.02.2013

Ответы (2)


arrow_upward
0
arrow_downward

Очень просто, нет необходимости устанавливать какой-либо модуль, используйте javascript для заполнителя.

вставьте этот код в раздел head в page.tpl

<script language="javascript" type="text/javascript"> 

function placeholder()
{
var input = document.getElementById ("edit-message");
input.placeholder = "Add Your Text Here";   

}
</script>

Замените «edit-message» идентификатором вашей текстовой области (используйте пожарную ошибку)

Добавьте этот onload="javascript:placeholder();" в тег body

<body onload="javascript:placeholder();"  class="<?php print $body_classes; ?>">

Самый простой способ использовать заполнитель, надеюсь, это поможет!

person Bala    schedule 21.02.2013
comment
рекомендуется избегать использования обработчиков событий в HTML, а прикрепить событие к элементу. Кроме того, зачем использовать JS, чтобы сделать это со всем этим кодом, когда все, что вам нужно, это простой атрибут, добавленный к тегу textarea? Какой смысл в атрибуте placeholder, если вы все равно используете JS? - person cryptic ツ; 21.02.2013

arrow_upward
0
arrow_downward

Поведение, которое вы ищете, разрешается атрибутом «заполнитель» HTML5, реализованным для полей ввода в современных браузерах: Firefox 4+, Opera 11+, Safari 4+, Chrome 4+... и только в IE10+ :(

Итак, ИМХО, у вас есть 2 способа реализовать «функциональность заполнителя» в полях ввода:

1) Быстрый и грязный способ: использование обработчиков событий Javascript. Таким образом, вы можете одновременно поддерживать старые и современные браузеры, если включен JS.

2) Правильное и многообещающее решение: использование атрибута «заполнитель» HTML5.

Как вы можете догадаться, второй подход сложнее реализовать, потому что атрибут placeholder изначально не поддерживается в формах Drupal 7. Чтобы Drupal отображал поля с атрибутом placeholder="hint...":

а) Если вы используете Webform Module v.7.x-3.x или 7.x-4.x для создания своих форм, просто примените к нему патч, опубликованный в этой теме: http://drupal.org/node/1305826 и/или...

b) Предварительно обработайте разметку форм в файле template.php вашей темы, как описано в: http://nathanbuskirk.com/drupal7-placeholder-text-and-html5-forms

В обоих случаях для поддержки IE6-9 и других старых браузеров вам потребуется дополнительно использовать JS-библиотеку pollyfill, например Placeholder.js ( https://github.com/jamesallardice/Placeholders.js) или Simple-Placeholder.js JQuery ( https://github.com/marcgg/Simple-Placeholder )

Надеюсь, поможет.

person Interdruper    schedule 14.05.2013