[JS, CSS] Změna stylu vstupního pole při výběru

[Aigor]

Ahoj,

v javascriptu moc nedělám, tak marně tápu.. Ve formuláři textové vstupní pole. Chci aby tam šedým textem bylo napsáno např. "sem zadejte heslo". Po výběru pole text zmizí a uživatel tam napíše vlastní už normálním písmem (klasika, všichni to známe z přihlašování).
Vyhodit text nápovědy po vybrání problém není, ale nevím jak přepnout styl.... Poradil by někdo?

[Jey]

ahoj, rád bych poradil, ale koukám, že to mám řešené bez těch stylů (http://www.hanspaulska-liga.cz nahoře vpravo).
takže pokud něco potřebuješ okoukat, opsat, inspiruj se u mně.
já přidávám téma do sledovaných

edit: nebude to něco jako tahle pseudotřída (css3, focus)? nemám čas to zkoušet/testovat, kdyžtak napiše jak jsi dopadl.
http://www.cssdrive.com/index.php/ex..._pseudo_class/

[Dismembered]

function changeClass(){
    document.getElementById("idElementu").setAttribute("class", "požadovanáTřída");
}

[Aigor]

Díky, vyřešeno!

A když už jsme u toho, je nějaký rozdíl v zápisu:
document.testf.info.className = 'norm';
nebo
document.getElementById(id).setAttribute('class', 'norm');

Jasně - jeden bere prvek podle jména, druhý podle id.
Ale pokud z hlediska čistoty kódu je vhodnější pracovat s kterou verzí?
Můj dojem je, že podle id je to asi modernější a víc publikované. Na druhou stranu se nejde zbavit dojmu, že je to takové škrábání se levou nohou za pravým uchem. V případě, že nepotřebuju parametry předávat do funkce a znám přesně jména, je něco špatného měnit přímo vlastnosti prvků?
Ptám se jen proto, aby až si někdo po mě bude číst kód neřekl že jsem čuně

[MEluZíNa]

Nejlip na tohle pouzivat nejakej framework protoze se to lisi browser od browseru. Asi nejznamenjsi je jQuery http://jquery.com/

[Aigor]

Nejlip na tohle pouzivat nejakej framework protoze se to lisi browser od browseru. Asi nejznamenjsi je jQuery http://jquery.com/

Máš naprostou pravdu, jenže já tohle jednak píšu do svého frameworku a hlavně se přitom učím. jQuery je zatím pro mne kanón na vrabce, občas ho použiju na něco, kde zatím znalostmi nestačím. Používat cizí řešení vyžaduje především jim rozumět a to zatím říct nemůžu.

Ale mám další otázku - teď pls jen teoreticky:

Situace:
- mám formulář, kde jsou předvyplněná pole textem sloužícím jako nápověda
- na onFocus() vyhodím text, nastavím normální styl a umožním editaci
- na onBlur() zkontroluju data, pokud je prázdné vrátím tam text nápovědy

Funguje to dobře, ale text nápovědy je napsaný dvakrát pro každé pole (jako value a pak ve funkci onBlur()), což je samozřejmě špatně.
Jak to řešit elegantněji - ideálně bych někam do kódu nadefinoval help-texty pro dané id a linkované fce by byly nezávislé na formu ?

[ZeeZ]

- na onFocus() vyhodím text...

do nejake promenne treba ? A po kontrole ho tam pripadne vratim ?

[Aigor]

Dobrá, to mě také napadlo - ale jak tam ten text definovat?
Pokud ho jednoduše převyplním jako value, tak sice JS si s tím bude umět poradit jak říkáš, ale když se bude form reloadovat např. kvůli opravě a ve value budou data ke kontrole, tak je to už špatně.
Zase mě napadá jedině napsat extra fci pro help-text na každé pole extra, ale to je prostě čuňárna. Musí být nějaké elegantnější řešení...

[ZeeZ]

Napada me druha prasarna a to treba nejaky parametr u inputu [input type='text' help='bla bla bla' ... /] (html by pak bylo nevalidni) a nebo ten formular generovat tak, ze za kazdym inputem vypises treba span s display:none a v nem budes mit tyhle napovedy (ciste reseni, co se validity tyce). Ty si pak jednoduse kdykoli nactes / zobrazis. Ted netusim, jak to s napovedou (nikoli validaci) delaji ruzne frameworky.

[Aigor]

Zrovna u toho dnes sedím a nakonec to řeším celkem triviálně

Nápovědu píšu do title, takže je to validní i přehledné. Což se mě asi líbí nejvíc. Sice už tam nejdou takové blbinky jako že v title bude ještě něco jiného než se předvyplní, ale to už bych neřešil. Jinak ten tvůj nápad se spanem taky nezní špatně!

Na každém prvku mám navěšenou fci onFocus() a onBlur().
onFocus zjistí pokud je aktivní styl nápovědy a vyhodí nápovědný text (přičemž v title funguje dál, takže pro méně chápavě BFU se jim to zobrazí stejně)
onBlur zkontroluje jestli form obsahuje nějaké data, pokud ne, vrátí obsah title a zapne styl pro nápovědu

Teď zbývá čistě JS cyklus, kde vůbec nevím na co se zeptat google....
- jak napsat fci onLoad, která prohledá stránku a pro všechny vstupní prvky ve formulářích zavolá onBlur(id) kvůli inicializaci ?

[MEluZíNa]

Pokud muzes pouzit HTML5, tak tam je pekna ficurka data attributes http://www.zdrojak.cz/clanky/html5-u...a-k-elementum/

[EDIT] a prave treba na prochazeni vsech elementu majicich nakou vlastnost je moc prima jQuery (nasledujici kod najde vsechny element majici tridu 'input-with-helper-text' a vsem jim pripoji onFocus a onBlur handlery) :

$('.input-with-helper-text').focus(function(element){
   //... zde napises handler pri onFocus
}).blur(function(element) {
   //... zde napises handler pri onBlur
});