Всім доброго часу доби.
З вами Андрій Бернацький.
Звернувся до мене знайомий з питанням наступного змісту: Як зробити такі поля форми як на твоєму з Віктором сайті (що б в полі була підказка, що потрібно вводити, а по кліку на форму вона зникала)?
Справ звичайно зараз багато, але хорошим людям, чому б не допомогти. Заодно вирішив написати про те як це реалізується на практиці кратенькую статейку. Думаю, вам буде цікаво.
І так, починаємо.
Для початку нам знадобиться файл placeholder.js качаємо його звідси. Там, власне, знаходиться джерело.
Перший приклад Ви можете подивитися тут, а другий приклад результат наших з Вами дій Ви можете подивитися тут.
Все інше, загалом-то, досить просто робиться. Підключаємо скачаними файл на сторінці. Думаю, ви це вмієте, але все ж, нагадаю, що підключаємо його в частині head наступним чином:
Далі майструємо нашу форму:
inputPlaceholder( document.getElementById(‘hide_show’) )
inputPlaceholder( document.getElementById(‘hide_show’) )
Але є нюанс. Куди ж без нього. Спочатку текст відображається сірим кольором, а коли починаємо вводити свій текст він чорний, вірно? Нам потрібно трохи пограти з квітами.
Щоб отримати потрібний нам колір тексту, який видно відразу (текст-підказка), відкриваємо файл placeholder.js. На 18-му рядку шукаємо запис:
var placeholder_color = color || ‘#AAA’;
Як раз в кінці рядка в лапках) #AAA – це і є колір тексту. Давайте змінимо колір на червоний. Замість #AAA пишемо #FF0000.
Текст став червоним. Це так, але коли вводиш свій текст, він чорний. Для того що б і наш текст став червоним, додаємо в CSS файл, або частина head (залежно від того, де у вас описані стилі) властивість color id для нашого input-а:
#hide_show{
color:#FF0000;
}
Ось і всі хитрощі.
Що ще вам розповісти?
Думаю, у кого-небудь виникне питання: А що якщо мені потрібно два поля з підказками?
У цьому випадку кожному полю потрібно задавати свої значення для id і ці ж значення передавати скрипту, який знаходитися під формою. Нижче приклад:
inputPlaceholder( document.getElementById(‘hide_show1’) )
inputPlaceholder( document.getElementById(‘hide_show2’) )
Якщо щось не вийшло можна скачати архів прикладів по даному уроку тут.
Сподіваюся, що урок був корисним. До зустрічі!
Урок підготував: Андрій Бернацький. Команда webformyself.
E-mail:[email protected]
Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування
P. S. Хочете опублікувати цікавий тематичний матеріал? Якщо відповідь «Так», то тисніть сюди.
Тут Ви можете з нуля підняти HTML&CSS
