Я создал нечто подобное для проекта, над которым я работал .Основным отличием является то, что изображение было видно в любое время из соображений удобства использования.
Группировка ввода и кнопки:
Для первой части вашего вопроса я применил подход, заключающийся в том, чтобы использовать родительский контейнер для хранения как текстового поля, так и кнопки.Это позволит вам использовать подход Apple к поиску.Они использовали спрайт css ( tutorial ) вместо svg для изображения.Если вы используете браузер, который позволяет вам «проверять элемент», вы можете перейти на их сайт и посмотреть, как они это делают.
По сути, я рекомендую поместить фоновое изображение на содержащий элемент, чтобы текстовое поле и кнопка выглядели так, как будто они «внутри изображения».Затем, когда текстовое поле получает фокус, вы можете сместить фоновое изображение по вертикали с помощью CSS-позиционирования, и вы получите желаемый вид.
Скрыть / исчезнуть:
Скрывать и исчезать, используя только CSS,возможный.Однако вы можете создать два класса, один для скрытия, а другой для показа кнопки.Затем в javascript, когда текстовое поле получает фокус, вы можете установить видимость кнопки как «видимую», а при размытии - «скрытую».
Рекомендация JS:
Вы должны посмотретьиспользовать прослушиватели событий ( tutorial ) вместо атрибутов HTML для определения ваших нажатий или нажатий.Это гораздо чище и элегантнее.Здесь я бы сказал, что использование фреймворка, такого как jQuery, значительно упростит задачу.Это позволяет вам устанавливать прослушиватели событий и не беспокоиться о старых браузерах и различных реализациях стандарта.
Надеюсь, это поможет.