A Погледнете в атрибута на резервиращия HTML5
Един от любимите ми нови парчета в HTML5 е възможността за добавяне Текст със запазено място лесно. Текстът на заместителя е сивият текст, който намирате в полето за въвеждане, което се използва, за да даде намек на потребителите за това, какво въвеждане се очаква в това поле. След като потребителите започнат да въвеждат в вход полето, този текст ще изчезне.
В старите дни ние обикновено правим това с JavaScript, както следва;
Няма нищо лошо в тази практика, но е по-лесно за HTML5.
HTML5 въведе нов атрибут с логическо име; контейнер. Ето един пример:
Ако го разгледаме в браузърите, входът сега трябва да има сив текст, както се вижда по-долу;
Няколко неща, които трябва да се отбележат: според спецификацията, контейнер атрибут не трябва да се използва като алтернатива на a етикет също така се предлага този атрибут да се прилага само към вход типове, които изискват текст, напр. текст, парола, Търсене, електронна поща, текстово поле и тел.
Добавяне контейнер към вход типа: радио и отметка няма да има значение.
Placeholder & CSS
Освен това, стайлинг на текста на контейнера чрез CSS също е възможен, но по време на това писане все още е ограничен само до Firefox и Webkit браузъри..
Следният пример показва как променяме текста на контейнера в зелено, както в Webkit, така и във Firefox;
вход :: - webkit-input-placeholder цвят: зелен; вход: -moz-placeholder цвят: зелен;
Само да си спомня :: - WebKit-входно-контейнер и : -Moz-заместител ще засегне само текста и не може да бъде написан паралелно.
вход :: - webkit-input-placeholder, вход: -moz-placeholder цвят: зелен;
Тази част от кода няма да работи.
Селектор на атрибути
CSS3 също дойде да подкрепи този атрибут чрез въвеждане на [Контейнер] селектор на атрибути;
вход [placeholder] border: 1px зелен цвят;
В примера по-горе избираме всеки вход че има контейнер атрибут и променяте границата на зелена.
Съвместимост на браузъра
Тази нова функция HTML5 не е изненадващо, че не се поддържа в стари браузъри и понастоящем се поддържа изцяло само на: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 и Internet Explorer 10 (което все още не е официално пуснато).
Полифилд
Независимо от това, ако трябва да покажем контейнера в по-старите браузъри, но все пак да можем да използваме контейнер атрибут, можем да използваме Polyfills. Има много Полифилд там, но в този пример ще използваме PlaceMe.js;
PlaceMe.js, както можете да видите от горния кодов фрагмент, зависи от jQuery. Сега, ако го разгледаме, например в Internet Explorer 9, всички данни трябва да показват текста на контейнера.
- Преглед на демо
- Изтеглете Източник
Заключителна мисъл
Най- HTML5 място Атрибутът със сигурност улеснява добавянето на текст на контейнера. Сега зависи от нас, уеб разработчиците и дизайнерите, да изберат какъв метод да използвате: JavaScript или HTML5.
Ако смятате, че използването на Polyfills и jQuery за поддържане на стари браузъри е излишно, тогава JavaScript е очевидно по-подходящ за тази работа. Но ако можете спокойно да игнорирате старите браузъри, тогава използването на HTML5 Placeholder вероятно е по-добър начин.
