Кладем инпут в лейбл. Кидаем <small> с подсказкой в лейбл. Лейблу делаем position: relative. Располагаем смол над инпутом. Делаем цвет смола прозрачным или просто сереньким.

Получается, когда юзер кликает мышкой по подсказке, фокус переходит в инпут. Остается научить страничку прятать подсказку, когда в инпуте появляется текст.

Чтобы все было красиво, надо чтобы подсказка пряталась сразу после появления текста в инпуте. Сделать это не так просто, как кажется. Если подписаться на keydown , то мы не сможем узнать, какой текст сейчас в инпуте. Если подписаться на keypress или keyup, то мы сможем спрятать тип только после небольшой, но заметной задержки.

Махинации с отлавливанием делита и бекспейса не проходят, так как юзер может выделить текст мышкой и удалить его разом. Дублировать функциональность инпута для того, чтобы узнать его значение — это не наш путь.

Работает очень простой финт. Подписываемся на keypress, откладываем событие с помощью setTimeout(), и производим все проверки в отложенной функции, когда инпут уже определиться со своим состоянием.