Все проще простого. В
JavaScript существуют события
focus и
blur, можно при наступлении этих события на конкретном элементе скрывать и показывать ваш лейбл. Пример кода с использованием данных событий в атрибутах:
<input onfocus="document.querySelector('label[for=modal_name]').style.display = 'none';" onblur="document.querySelector('label[for=modal_name]').style.display = 'block';" type="text" name="name-form" id="modal_name">
Код внутри
onfocus выполняется при получении фокуса и делает лейбл невидимым, а код внутри
onblur наоборот выполняется уже при потере фокуса и соответственно возвращает видимость.
Если разобрать более подробно, то
document.querySelector('label[for=modal_name]') ищет на странице элемент с тегом
label имеющий атрибут
for равный
modal_name, а далее мы просто присваиваем найденному элементу тот или иной стиль:
display: none или
display: block в нашем случае.
P. S. Добавлю напоследок, что код на jQuery будет короче, примерно так:
<input onfocus="$('label[for=modal_name]').hide();" onblur="$('label[for=modal_name]').show();" type="text" name="name-form" id="modal_name">
