Weform placeholder modul

csszilvia képe

Sziasztok!

Az lenne a kérdésem, hogy hogyan kell használni a Placeholder modult.

Webformnál az input mezőkhöz szeretnék placeholder attribútumot felvenni. Letöltöttem a placeholder modult, aktiváltam, + a szükséges JQuery file is a helyén van. De hogyan tovább?

Másik kérdésem az lenne, hogy a webformnál a címkék rejtve vannak, csak a placeholder működne, de úgy tudom, hogy ezt nem minden böngésző támogatja. Hozzá tudok adni esetleg egy title attribútomot is a mezőkhöz?

Előre is köszi a segítséget!

Köszi
Szilvi

Melyik modulhoz, modulokhoz kapcsolódik a téma?: 
Drupal verzió: 
Sk8erPeter képe

Form API-t tudod kezelni saját sminkből vagy modulból? Mert akkor könnyű a dolog, egy megfelelő hook_form_alter()-ben csak hozzáadod az adott formelemhez a
'#placeholder' => t('Enter your name here'),
kulcsot a megfelelő formmezőhöz.
Egyébként nem tudom, mennyire szükséges egyáltalán a Placeholder modul használata, gondolom ez max. annyit tesz hozzá, hogy amikor a júzer a formelemre klikkel, akkor tűnjön el a placeholder... ez nem biztos, hogy indokolt.

OFF bekapcs.:
vicces, hogy a projekt oldalán azt mondja:

"This project adds an extra FAPI attribute called '#placeholder' to textfield field elements. Often textfields should have some text in them like "Enter your text here" until the user clicks on (or tabs to) the element in question. At that point, the text should disappear and the user can enter his or her desired input.

Take a look at the "Search Drupal.org" text in the search box at the top of this page to see what I'm talking about :)"

Kár, hogy ez butaság, mert a drupal.org-os kereső pont nem úgy működik, hogy amikor az ember belekattint, akkor eltűnik a "Search drupal.org", hanem csak egy mezei placeholder attribútum van hozzáadva:
<input type="text" maxlength="128" name="search_theme_form" id="edit-search-theme-form-1" size="15" value="" placeholder="Search drupal.org" class="form-text">
ami épp az ezt az attribútumot támogató böngésző beépített magatartása szerint viselkedik, tehát hogy csak akkor tűnik el a szöveg, amikor elkezdünk a formelembe gépelni. :))
/OFF kikapcs.

Form API használata esetén ugyanis nagyon egyszerű a placeholdert hozzáadni, pl. egy saját theme_textfield()-ben ennyi:

  1. /**
  2.  * Returns HTML for a textfield form element.
  3.  *
  4.  * @param $variables
  5.  * An associative array containing:
  6.  * - element: An associative array containing the properties of the element.
  7.  * Properties used: #title, #value, #description, #size, #maxlength,
  8.  * #required, #attributes, #autocomplete_path.
  9.  *
  10.  * @ingroup themeable
  11.  */
  12. function SMINKEDNEVE_textfield($variables) {
  13. $element = $variables['element'];
  14. $element['#attributes']['type'] = 'text';
  15. element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength'));
  16. _form_set_class($element, array('form-text'));
  17.  
  18. if(isset($element['#name']) && $element['#name'] == 'mail'){
  19. $element['#attributes']['placeholder'] = '[email protected]';
  20. }
  21. else{
  22. // pl. switch user block autocomplete mezőjénél nincs beállítva a #title
  23. $element['#attributes']['placeholder'] = isset($element['#title']) ? $element['#title'].'...' : '';
  24. }
  25.  
  26. $extra = '';
  27. if ($element['#autocomplete_path'] && drupal_valid_path($element['#autocomplete_path'])) {
  28. drupal_add_library('system', 'drupal.autocomplete');
  29. $element['#attributes']['class'][] = 'form-autocomplete';
  30.  
  31. $attributes = array();
  32. $attributes['type'] = 'hidden';
  33. $attributes['id'] = $element['#attributes']['id'] . '-autocomplete';
  34. $attributes['value'] = url($element['#autocomplete_path'], array('absolute' => TRUE));
  35. $attributes['disabled'] = 'disabled';
  36. $attributes['class'][] = 'autocomplete';
  37. $extra = '<input' . drupal_attributes($attributes) . ' />';
  38. }
  39.  
  40. $output = '<input' . drupal_attributes($element['#attributes']) . ' />';
  41.  
  42. return $output . $extra;
  43. }

Ez most persze csak egy lehetőség a sokból, de szerintem a legegyszerűbb; ez annyit csinál, hogy minden mail szövegmezőbe a yourname@example.com stringet fogja belepakolni placeholderként, minden egyéb szövegmezőbe pedig a formelem címét, három ponttal, amennyiben a title be van állítva. Természetesen feltételekhez is lehet kötni ezt az egészet, tehát lehet olyat is, hogy csak bizonyos formelemeknél legyen egyáltalán placeholder, vagy alapból mindegyiknél legyen, kivéve az XYZ mezőket.
DE ha ezt használod, akkor érdemes tudni róla, hogy ez így sminkfüggő, viszont a Placeholder modul használata esetén sminktől függetlenül is lesznek placeholdereid.

2
0
csszilvia képe

de sajnos ennyire nem vagyok profi...

Valóban egy ilyen megoldásra gondoltam, és nem ragaszkodom a placeholder modulhoz. Mivel tudomásom szerint pl. az IE nem kezeli ezt az attributumot, mindenféleképpen szeretném használni a title-t.

Hogyan kezdjek hozzá?

Ha nem nagy fáradtság tudnál, segíteni, hogy hova is kell beírnom a fenti kódot..

Elnézést az értetlenkedésért, de sajnos még nem vagyok egy PHP guru, - ezen mielőbb változtatni szeretnék- ezért is keresgéltem a modulok között...

Előre is köszönöm,

Szép estét
Szilvi

0
0
szt képe

Ahogy azt Péter írta, ez egy sminkfüggő megoldás, szóval amelyik sminkhez teszed, abban lesz csak hatása.
És azt úgy kell, hogy az aktuális sminkedben megkeresed a template.php fájlt (valószínüleg megtalálod, de ha nincs még, akkor létrehozod).
Ebbe a fájlba bemásolod a fenti kódot, annyi változtatással, hogy a "SMINKEDNEVE" szót kicseréled az aktuális sminked nevére (ez pl. pontosan a sminked könyvtárának a neve).
Utána cache ürítés, és mennie kell.

3
0
csszilvia képe

Köszönöm, működik, egyedül az email mező nem akarja az igazságot, de keresem a hibát, azzal is csak tanulok:-)

Szép estét!

köszi
Szilvi

0
0
szt képe

Ha még szeretnél tanulni, akkor tedd fel a Devel modult, és a fenti függvényed végére tegyél bele egy ilyet:
dpm($variables);
Ez klasszul kidobja, hogy a függvényen belül mi történt az egyes textfieldek attribútumaival (a textfieldek pofozgatására most egyébként ezt a függvényt módosítgatod).

2
0
csszilvia képe

Valóban nagyon kis hasznos eszköz, sőt ahogy olvasgattam a leírását, felfedeztem a Firebug Drupalos add-on-ját. Egy újszülöttnek minden vicc új:-)

Visszatérve a problémára: továbbra sem teszi bele az email mezőbe, hogy [email protected], de már legalább rájöttem az okára. Legalábbis azt hiszem.

A többi mező osztálya form-text, ezé form-email (hiszen ezt választottam ki), az email-cím-ellenőrzés miatt.

Ha szöveges mezőként veszem fel az email-címet, működik a függvény: beteszi, hogy email....

Én mégis inkább az email mezős megoldást szeretném, gondolom ezt kell a függvényben módosítanom. (Tudom, hogy ez már nem közvetlenül Drupalos téma, de ha belefér még, kérlek segíts)

Köszi, és ezer hála:
Szilvi

0
0
szt képe

Na megnéztem: az van, hogy a fenti függvény az email mezőbe nem tud beleszólni, erre egy másikat kell beizzítani: theme_webform_email

Innentől már sima ügy, az alábbi kód kell a template.php-ba:

  1. function SMINKEDNEVE_webform_email($variables) {
  2. $element = $variables['element'];
  3.  
  4. // This IF statement is mostly in place to allow our tests to set type="text"
  5. // because SimpleTest does not support type="email".
  6. if (!isset($element['#attributes']['type'])) {
  7. $element['#attributes']['type'] = 'email';
  8. }
  9.  
  10. // Convert properties to attributes on the element if set.
  11. foreach (array('id', 'name', 'value', 'size') as $property) {
  12. if (isset($element['#' . $property]) && $element['#' . $property] !== '') {
  13. $element['#attributes'][$property] = $element['#' . $property];
  14. }
  15. }
  16.  
  17. $element['#attributes']['placeholder'] = '[email protected]';
  18.  
  19. _form_set_class($element, array('form-text', 'form-email'));
  20.  
  21. return '<input' . drupal_attributes($element['#attributes']) . ' />';
  22. }

Az eredetihez képest a 17. sor lett beszúrva.

Ebben a folyamatban a megfelelő függvény megtalálása a legnehezebb, ebben segíthet a Devel modulhoz kapcsolódó Theme developer, az API reference, és contrib moduloknál a DrupalContrib API reference. Ja és a Form API Reference :)

5
0
csszilvia képe

Minden úgy működik, ahogy kell:-)

Köszönöm még egyszer!!!

Szép napot!
Szilvi

1
0
csszilvia képe

Hozzá tudok adni valahogy egy class attributumot ehhez a placeholderhez? szeretném formázni, de sehogy sem tudom elérni...
(Chrome-ban nem látható a színe miatt)

Előre is köszi:
Szilvi

0
0
Sk8erPeter képe

Nem kell class a placeholder formázásához.
Ettől függetlenül ha szeretnél, hozzá tudsz adni saját class-t:

_form_set_class($element, array('form-text', 'form-email'));

HELYETT (myclass osztályt adom hozzá):

_form_set_class($element, array('form-text', 'form-email', 'myclass'));

De az igazi válasz a placeholderek formázására:

http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeh...

  1. ::-webkit-input-placeholder {
  2. color: #999;
  3. }
  4. :-moz-placeholder {
  5. color: #999;
  6. }
  7. ::-moz-placeholder {
  8. color: #999;
  9. }
  10. :-ms-input-placeholder {
  11. color: #999;
  12. }

egy szemléletes példát felraktam neked ide külön mezőknek is meghatározok placeholder colort:

http://jsfiddle.net/Sk8erPeter/KyVXK/

3
0
csszilvia képe

Nem gondoltam, hogy ilyen egyszerű:-)

Jó éjt!

Szilvi

0
0