Javascript Підказки всередині INPUT - Leonid Shevtsov

Передмова 2011 року

На щастя, всі сучасні оглядачі підтримують атрибут placeholder , що дозволяє підказати всередині дуже просто і без Javascript:

Будь ласка, використовуйте цей спосіб.

Якщо хочеться підтримувати і не дуже сучасні браузери, наприклад, IE молодші за дев'ятку, доведеться підмішувати трохи Javascript для сумісності. Якщо ви використовуєте jQuery, для нього є відмінний плагін jQuery.placeholder. Перевага такого підходу в тому, що якщо браузер сам підтримує властивість placeholder, то ніякого яваскрипту йому не знадобиться. А ще в тому, що цей плагін підхоплює підказки безпосередньо з HTML, і їх не потрібно оголошувати окремо, як робив це я у своєму скрипті.

Для історії та людей, які бажають зробити підказки з особливим цинізмом, залишаю оригінал статті. Вихідники теж старі – такі ось скрипти я писав три роки тому.

Стаття 2008 року

Висновок якогось тексту в , коли він порожній.

Скрипт взятий із написаного мною у 2008 році пісенного архіву lyrified.com.

Постановка завдання: потрібно, щоб у порожньому виводився приглушеним кольором текст, наприклад, підказка.

HTML-розмітка

Javascript

Потрібно зберігати кілька параметрів для кожного поля, тому створюємо глобальний масив.

Щоб додати конкретне поле до цього масиву, використовуємо функцію:

Зверніть увагу, щоб визначити, порожнє поле чи ні, вже не можна перевірити value=='' . Тому потрібно написати функцію:

Обробник події нафокусі: якщо поле було порожнім (але в ньому відображалася підказка), при отриманні фокусу його потрібно очистити.

Крім того, виставляється прапорець, якийзакріплюється.

Обробник подіїonBlur: якщо користувач закінчив редагування поля та залишив його порожнім, потрібно повернути підказку.

Прапорець isFocused знімається.

Використання

Для кожного поля, що задіяно, викликаємо функцію inputHint_init :

---