Formulář, addText a onClick

jarks

Dobrý den, chtěl bych do vyhledávacího formuláře přidat nápovědný text, který po kliknutí zmizí. Výsledek by měl vypadat nějak takhle:

<input type="text" class="text" name="searchText" id="frm-searchText"
value="sem něco napište" onclick="if (this.value=='sem něco napište') this.value=''";/>

Pokud se pokouším nastavit ->onClick[], dostanu chybu MemberAccessException, Cannot read an undeclared property TextInput::$onClick.

$form ->addText('searchText', 'Najít text:')
->setValue('sem něco napište')
->onClick[] /* tady nevím */;

Je nějaká cesta, jak to tam dostat? Myslel jsem, že k tomu je ->setEmptyValue, ale to asi nebude ono.
Díky.

Ondřej Mirtes

Pokud se nemýlím, tak onClick pole nad prvky formuláře slouží k navěšování událostí – metod v PHP. A jelikož se formulář nijak po odklepnutí do textového inputu neodesílá, tak text input toto pole ani nemá.

Myslím, že by to šlo takto:

$form->addText('searchText', 'Najít text:')
->setEmptyValue($emptyValue = 'sem něco napište');
$form['searchText']->getControlPrototype()->onclick("if (this.value=='" . $emptyValue . "') this.value=''");

timbulko

Na toto existuje v HTML 5 pre inputy a textarey atribút placeholder (http://dev.w3.org/…verview.html#…), avšak nie je zatiaľ podporovaný všetkými prehliadačmi, takže toto sa dá ovplyvniť jedine javascriptom. Ja mám na to spravený jQuery skript, ktorý spoľahlivo simuluje placeholder vo všetkých prehliadačoch.

$('input[placeholder!=""], textarea[placeholder!=""]').each(function() {
  if ($(this).val() == '' || $(this).val() != $(this).attr('placeholder')) return;
  var c = '#808080';
  var def = $(this).attr('placeholder');

  $(this).data('pcolor', $(this).css('color'));
  $(this).css('color', c);
  $(this).val(def);

  $(this).focus(function () {
    if ($(this).val() != def) return false;
    $(this).css('color', $(this).data('pcolor'));
    $(this).val('');
  });

  $(this).blur(function () {
    if ($(this).val() != '') return false;
    $(this).css('color', c);
    $(this).val(def);
  });
});

Potom už len stačí elementu nastaviť placeholder:

$form ->addText('searchText', 'Najít text:')->setEmptyValue('nejaky text')->getControlPrototype()->placeholder('nejaky text');

kravčo

jarks napsal(a):

Dobrý den, chtěl bych do vyhledávacího formuláře přidat nápovědný text, který po kliknutí zmizí. Výsledek by měl vypadat nějak takhle:
<input type="text" class="text" name="searchText" id="frm-searchText"
value="sem něco napište" onclick="if (this.value=='sem něco napište') this.value=''";/>
Pokud se pokouším nastavit ->onClick[], dostanu chybu MemberAccessException, Cannot read an undeclared property TextInput::$onClick.
$form ->addText('searchText', 'Najít text:')
->setValue('sem něco napište')
->onClick[] /* tady nevím */;

Premenné tvaru onNiečo používa Nette na udalosti ($application->onStartup, $form->onSubmit, $submitButton->onClick).

Navyše udalosť onclick asi nie je úplne vhodná, keďže na formulárový prvok sa dá dostať i tabulátorom… ja používam nasledovné:

<input ... onfocus="this.value = ''; this.onfocus = null" ... />

HTML atribút sa tlačítku dá nastaviť pomocou konštrukcie:

$form->addText('searchText', 'Najít text:')
    ->setEmptyValue('sem něco napište')
    ->getControlPrototype()
        ->onfocus("this.value = ''; this.onfocus = null");

Je nějaká cesta, jak to tam dostat? Myslel jsem, že k tomu je ->setEmptyValue, ale to asi nebude ono.

Používam setEmptyValue() nie setValue(), práve kvôli validácii.

jarks

Díky moc všem za tak rychlé odpovědi!

Jay Gridley

A slo by to udelat tak, aby se na metodu ->onblur() nastavila zase setEmptyValue() ale ne jen text z setEmptyValue() ale i funkcnost validace…

Diky

PetrP

Tohle není ideální způsobm čistčí je umístit text bokem, a nad input ho pozicovat.

Píšu o tom např tady

kravčo

Čím je tvoj spôsob čistejší? Rád sa poučím… vypočujem argument/prečítam článok.