Погледајте у ХТМЛ5 Атрибут чувара места
Једна од мојих омиљених нових комада у ХТМЛ5 је могућност додавања Плацехолдер Тект лако. Текст замјенског знака је сиви текст који налазите у пољу за унос који се користи за давање савјета корисницима о томе који се унос очекује у том пољу. Када корисници почну да куцају у улазни поље, овај текст ће нестати.
У стара времена то обично радимо са ЈаваСцриптом, као што следи;
Нема ништа лоше у овој пракси, али је лакше у ХТМЛ5.
ХТМЛ5 је увео нови атрибут са логичким именом; плацехолдер. Ево примера:
Ако га погледамо на претраживачима, улазни податак сада треба да има сиви текст, као што се види испод;
Неколико ствари које треба запазити: према спецификацији, плацехолдер не треба користити као алтернативу а етикета такође се предлаже да се овај атрибут примењује само на улазни типове који захтевају текст, нпр. текст, пассворд, Претрага, емаил, тектареа и тел.
Додавање плацехолдер до улазни врсте: радио и поље за потврду неће направити никакву разлику.
Плацехолдер & ЦСС
Штавише, стилизовање текста резервисаног места преко ЦСС-а је такође могуће, али у време писања овог текста и даље је ограничено само на Фирефок и Вебкит прегледаче.
Следећи пример показује како смо променили текст резервираног места у зелени иу Вебкит-у иу Фирефок-у;
инпут :: - вебкит-инпут-плацехолдер цолор: греен; инпут: -моз-плацехолдер цолор: греен;
Само да запамтим :: - вебкит-инпут-плацехолдер и : -моз-плацехолдер ће утицати само на текст и не може се писати паралелно.
инпут :: - вебкит-инпут-плацехолдер, инпут: -моз-плацехолдер цолор: греен;
Овај део кода неће радити.
Селектор атрибута
ЦСС3 је такође дошао да подржи овај атрибут увођењем [плацехолдер] селектор атрибута;
инпут [плацехолдер] бордер: 1пк солид греен;
У горњем примјеру одабиремо сваки улазни који има плацехолдер и промените границу на зелену.
Компатибилност претраживача
Ова нова ХТМЛ5 функција није изненађујуће подржана у старим прегледачима и тренутно је у потпуности подржана у: Фирефок 4+, Цхроме 4+, Сафари 5+, Опера 11.6 и Интернет Екплорер 10 (који још није званично објављен).
Плацехолдер Полифиллс
Ипак, ако морамо да прикажемо резервисано место у старијим прегледачима, али да ипак можемо да га користимо плацехолдер атрибут, можемо користити Полифиллс. Има доста Плацехолдер Полифиллс тамо, али у овом примеру ћемо користити ПлацеМе.јс;
Тхе ПлацеМе.јс, као што се види из горњег исјечка кода, овиси о јКуери. Сада, ако га погледамо, на пример, Интернет Екплорер 9 сви уноси би сада требало да прикажу текст резервисаног места.
- Виев Демо
- Довнлоад Соурце
Финал Тхоугхт
Тхе ХТМЛ5 Плацехолдер атрибут свакако олакшава додавање текста резервисаног места. Сада је на нама, веб програмерима и дизајнерима, да изаберемо који метод да користимо: ЈаваСцрипт или ХТМЛ5.
Ако узмете у обзир да је коришћење Полифиллс-а и јКуери-а за подршку старим претраживачима сувишно, онда је ЈаваСцрипт очигледно прикладнији за тај посао. Али ако можете мирно да игноришете старе претраживаче онда је коришћење ХТМЛ5 Плацехолдер вероватно бољи начин.
