az egyik kedvenc új darab HTML5 az a képesség, hogy adjunk helyőrző szöveget könnyen. A helyőrző szöveg az a szürke szöveg, amelyet egy beviteli mezőben talál, amely arra szolgál, hogy utalást adjon a felhasználóknak arról, hogy milyen bemenet várható az adott mezőben. Miután a felhasználók elkezdenek gépelni a input mezőbe, ez a szöveg eltűnik.
a régi időkben ezt általában a JavaScripttel végezzük, az alábbiak szerint;
nincs semmi baj ezzel a gyakorlattal, de könnyebb a HTML5-en.,
HTML5 introduced a new attribute with a logical name; placeholder., Itt egy példa:
<input type="text" placeholder="Placeholder Text">
Ha azt látjuk, hogy a böngészők, a bemeneti már a szürke szöveg, mint alább látható;
Egy pár dolog, amit meg kell jegyezni: specifikáció szerint, a placeholder az attribútum nem használható, mivel egy alternatív hogy egy label meg az is javasolt, hogy ezt a tulajdonságot csak akkor lehet alkalmazni, hogy a input típusok, amelyek megkövetelik a szöveg, pl., text, password, search, email, textarea és tel.
placeholder hozzáadása a input típusokhoz: radio és checkbox nem tesz különbséget.
helyőrző & CSS
továbbá, stílus a helyőrző szöveget CSS-en keresztül is lehetséges, de abban az időben ez az írás még csak a Firefox és Webkit böngészők.,
a következő példa azt mutatja, hogyan változtatjuk meg a helyőrző szövegét zöldre mind a Webkit, mind a Firefox esetében;
input::-webkit-input-placeholder {color: green;}input:-moz-placeholder {color: green;}
csak emlékezni bár a ::-webkit-input-placeholder és :-moz-placeholder csak a szöveget érinti, és nem írható párhuzamosan.
input::-webkit-input-placeholder, input:-moz-placeholder {color: green;}
Ez a kódrészlet nem fog működni.,
attribútum választó
CSS3 is jött, hogy támogassa ezt az attribútumot bevezetésével a attribútum választó;
input {border: 1px solid green;}
a fenti példában, kiválasztunk minden input, amely a placeholder attribútum, majd módosítsa a határ zöld.,
Böngésző kompatibilitás
Ez az új HTML5 funkció nem meglepő módon nem támogatott a régi böngészőkben, és jelenleg csak teljes mértékben támogatott: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 és az Internet Explorer 10 (ami hivatalosan még nem jelent meg).
helyőrző Polyfills
Mindazonáltal, ha meg kell jelenítenünk a helyőrzőt a régebbi böngészőkben, de továbbra is használhatjuk a placeholder attribútumot, használhatunk Polifilleket., Van egy csomó helyőrző Polyfills odakinn, de ebben a példában fogunk használni a PlaceMe.js;
<script src="https://www.hongkiat.com/blog/html5-placeholder/amp/jquery.js" type="text/javascript"></script><script src="https://www.hongkiat.com/blog/html5-placeholder/amp/placeme.js" type="text/javascript"></script>
the PlaceMe.js, mint látható a kódrészlet felett, függ jQuery. Most, ha például az Internet Explorer 9-ben tekintjük meg, az összes bemenetnek most meg kell jelenítenie a helyőrző szöveget.
- Demo megtekintése
- letöltési forrás
végső gondolat
a HTML5 helyőrző attribútum minden bizonnyal megkönnyíti a helyőrző szöveg hozzáadását., Most rajtunk, webfejlesztőkön és tervezőkön múlik, hogy melyik módszert használjuk: JavaScript vagy HTML5.
Ha úgy gondolja, hogy a Polyfills és a jQuery használata a régi böngészők támogatására felesleges, akkor a JavaScript látszólag jobban megfelel a feladatnak. De ha békésen figyelmen kívül hagyhatja a régi böngészőket, akkor a HTML5 helyőrző használata valószínűleg jobb módszer.