Зниклий текст у input
Нещодавно в мене запитали, як зробитизникаючий текст в input. Тобто щоб спочатку було якесь слово написане в текстовому полі (яка-небудь підказка, наприклад), а при натисканні воно стиралося. При цьому ще щоб і змінювався колір , тобто був спочатку блідо-сірчаний, а текст, який вводить користувач, ставав чорним. Ось як таке зробити, ми з Вами розберемо у цій статті.
Пояснюю алгоритм. Спочатку у нас у полі сірим кольором написано "Ваше ім'я". При отриманні фокусу на це поле викликається обробник подіїonfocus, в якому ми перевіряємо, якщо значення поля дорівнює "Ваше ім'я", ми його перемо плюс встановлюємо чорний колір. Якщо там написано щось інше (користувач раніше написав), то нічого не робимо.
При втраті фокусу викликаєтьсяonblur, в якому ми дивимося значення текстового поля, і якщо воно порожнє, то встановлюємо "Ваше ім'я" і ставимо сірий колір.
Я рекомендую Вам просто скопіювати цей код і подивитися на його роботу, щоб Ви зрозуміли, як він діє, а вже, зрозумівши його роботу, розібратися в даному алгоритмі не важко.
Ось таким нехитрим чином робитьсязникає текст в input.
Додайте до мене в друзіВКонтакте: http://vk.com/myrusakov. Якщо Ви хочете дати оцінку мені та моїй роботі, то напишіть її в моїй групі: http://vk.com /rusakovmy.
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так:
Коментарі ( 11 ):
можна було б просто скористатися атрибутом placeholder, але як завжди він не працює в ie
Мені цей спосіб дуже не подобається, тому що в ньому є невеликий глюк, тобто Набираєш у пошуку 'Введіть слова для пошуку', прибираєш фокус для якихось справ, ставиш фокус на текстове поле і. чому пішов текст? Мені здається, що тут потрібно або робити другу перевірку на колір тексту або ставити полю клас з тим, що воно з підказкою.
Біда в тому, що для type = "password" так зробити не можна!
Згоден із Михайлом. У разі введення тексту, на який іде перевірка, скрипт працюватиме некоректно. Додатково додавати перевірку на колір не варто – її можна зробити основною, оскільки кінцевий користувач не може змінювати кольори тексту в полі введення.
Михайло дав вам основи, а доопрацювати скрипт як вам треба, ви можете і самі
До речі є одна істотна пропозиція, було б набагато цікавіше, якби ти зробив одразу приклад роботи скрипту. А то якщо чесно сухувато! Відомості дуже корисні, але краще, якщо відразу у читача є можливість побачити, поклацувати, відчути. У тебе є картинка під підзаголовком, ось перетвори її в input. Ну це моє побажання :)
А ще питання, чи планується в майбутньому вихід курсу з JS, AJAX і jQuery?
У мене питання початківця: Чому вказаний код (зникає текст в input.) не обрамляється тегом