Зникаючий текст в input

Відео: c # - how to Add placeholder text to textbox [with source code] # 1BestCsharp

Відео: Баг в вк батькові в 4 рядки

Не так давно у мене запитали, як зробити зникаючий текст в input. Тобто щоб спочатку було якесь слово написано в текстовому полі (якась підказка, наприклад), а при кліці воно стиралася. При цьому ще щоб і змінювався колір, тобто був спочатку блідо-сірчаний, а текст, який вводить користувач, ставав чорним. Ось як таке зробити, ми з Вами розберемо в цій статті.

В основі лежить досить простий jаvascript, який можна вмістити прямо в самому тезі input:

Відео: C # - Урок 8 - Програмне cоздание елементів

type="Text"name="Name"style="color:# 777-"value="Ваше ім`я"onfocus="if(this.value ==`Ваше ім`я`){this.value =``-this.style.color =`# 000`-}"onblur="if(this.value ==``){this.value =`Ваше ім`я`-this.style.color =`# 777`-}"/ Gt;

Пояснюю алгоритм. Спочатку у нас в поле сірим кольором написано "Ваше ім`я". При отриманні фокусу на це поле викликається обробник події onfocus, в якому ми перевіряємо, якщо значення поля одно "Ваше ім`я", Ми його стираємо, плюс встановлюємо чорний колір. Якщо там написано щось інше (користувач раніше написав), то нічого не робимо.

Відео: Останнє

При втраті фокуса викликається onblur, в якому ми дивимося значення текстового поля, і якщо воно порожнє, то встановлюємо "Ваше ім`я"І ставимо сірий колір.

Я рекомендую Вам просто скопіювати даний код і подивитися на його роботу, щоб Ви зрозуміли, як він діє, а вже, зрозумівши його роботу, розібратися в даному алгоритмі не складе ніяких труднощів.

Ось таким нехитрим чином робиться зникаючий текст в input.

Поділися в соціальних мережах:

Схожі