Когато оформлението на форми често е необходимо да се използва текст замяна. Мисля, че сте на много места е изпълнено, когато по подразбиране в полето за въвеждане на текст е написан, но е необходимо да кликнете върху полето, тъй като текстът автоматично ще изчезне и можете да въведете там, независимо.

В HTML5, за реализацията на тази, има забележителна характеристика на заместителя. която определя текст намек в рамките на входните елементи.

Той пише, както следва:

Текст, определен от контейнер. Тя изчезва автоматично, когато получи съсредоточи това поле за въвеждане. Но за съжаление, не всички браузъри разбират този атрибут. Следователно, за да е заместител съвместимост различни браузъри, е необходимо да се използват специални приставки, написани на JQuery.

На един от тези плъгини тук и ще бъдат обсъдени в тази статия. И ние стигнем до изхода, можете да видите, като кликнете върху бутона "изглед демонстрация" на.

Стъпка 1 - Създаване на HTML форма

Първо съм създал обичайната форма, в която примера, който ще се разглоби на действието на настоящия добавка. Имайте предвид, че заместителят може да се настрои не само за текстови полета за въвеждане, но и за полета за въвеждане на пароли, текстови области и т.н.

Етап 2 - Свържете плъгин Заместител JQuery

След това трябва да се свържете на действителната JQuery и самата JQuery плъгин Заместител библиотека (можете да ги изтеглите от други материали, те са в папката JS).

Стъпка 3 - инициализиране на приставката

Сега, когато всички сме спечелили, инициализира преди свързан плъгин:

Ако сте направили всичко правилно, сега по-стари браузъри, както и модерна, да започнем да разбираме заместващия атрибут.

Създаване стилове за контейнер с CSS

По подразбиране, текстът е посочено с атрибута контейнер се показва в сиво. Но ако някога ви се наложи да се промени това, а след това за всеки браузър, който искате да прилага подхода.

Например, за браузърите Chrome и Safari използва псевдо :: - WebKit-входно-контейнер. за Firefox 18 и по-рано -: -moz-контейнер. но за Firefox 19+ използва различен псевдо :: - Моз-контейнер. О, и за IE10 -: -MS-входно-контейнер.

За по-стари браузъри, тя автоматично задава контейнер клас заместващия текст, и по този начин, лесно можете да контролирате външния му вид.

Това означава, че CSS стилове могат да изглеждат така:

Имайте предвид, че правилата за всеки от псевдо-класовете се определят по отделно, тъй като те не могат да бъдат групирани.

И дори, че би искал да се отбележи, най-после, защото с Opera 11. браузър е проблем, защото в него, ние не можем да стилизирам контейнер. защото в браузъра просто няма подходящ псевдо.