Placeholder jquery - helyettesítő szöveget

Amikor az űrlapok formai gyakran szükséges egy helyettesítő szöveget. Azt hiszem, sok helyen akkor teljesül, ha az alapértelmezett a beviteli mezőbe a szöveg van írva, de szükséges, hogy kattintson a területen, a szöveg automatikusan eltűnik, és megadhatja ott, mindegy.

A HTML5, a megvalósítása ennek van egy figyelemre méltó tulajdonsága a helykitöltő. amely meghatározza a célzást szöveget a beviteli elemeket.

Azt írja az alábbiak szerint:

Szöveg által megadott helykitöltő. Ez automatikusan eltűnik, amint megkapja a hangsúly ezen a beviteli mezőt. De sajnos, nem minden böngésző érti ezt az attribútumot. Ezért ahhoz, hogy helyfoglaló kereszt-böngésző kompatibilitás, szükség van egy speciális plug-inek írt jQuery.

Az egyik ilyen plug-in van, és lesz szó ebben a cikkben. És, hogy a kijárat, akkor láthatjuk, kattintson a gombra „view demo”.

1. lépés - Készítsen HTML-formában

Először létre a szokásos formát, amelyben a példában most szétszedni a működését a plug-in. Megjegyezzük, hogy a helykitöltő lehet állítani nem csak a szöveg beviteli mezők, hanem a jelszó beviteli mezők, a szöveges területek, stb

2. lépés - Connect-bővítmény Placeholder jQuery

Ezután kell csatlakoztatni a tényleges jQuery és jQuery plugint maga Placeholder könyvtár (letöltheti őket más anyagok, azok a js mappa).

3. lépés - inicializálása a bővítmény

Most, hogy már minden szerzett bekapcsolná korábban csatlakoztatott bővítmény:

Ha mindent helyesen, most régebbi böngészők, valamint modern, elkezdik megérteni a helykitöltő attribútumot.

Beállítása stílusok egy helykitöltő CSS

Alapértelmezésben a megadott szöveget a helykitöltő attribútum szürkén jelenik meg. De ha valaha is kell változtatni, akkor minden böngésző az alkalmazni kívánt megközelítés.

Például Chrome és Safari böngészőben használható pszeudo :: - WebKit-input-helykitöltő. Firefox 18 és korábbi -: -moz-helykitöltő. de a Firefox 19+ használ egy másik ál :: - moz-helykitöltő. Ja, és IE10 -:-MS-input-helykitöltő.

A régebbi böngészők, a bővítmény automatikusan beállítja a helyőrzőszöveg helykitöltő osztály, és így könnyen ellenőrizni a megjelenését.

Vagyis, a CSS stílusok néz ki:

Megjegyezzük, hogy a szabályokat a pszeudo-osztályokat határoznak külön, mert a nem lehet őket csoportosítani.

És még, hogy szeretné megjegyezni végre, mert az Opera 11 böngésző egy probléma, mert benne, nem tudjuk stilizál helykitöltő. mert a böngésző egyszerűen nincs megfelelő ál.