Ссылка на код в github -
https://github.com/GreatGleb/Recipes-of-sandwiches
То, как я пытался решить это с помощью js -
в том же репозиторие github - js/losos.js - строки 722 - 791.
У меня есть поле для ввода текста (числа) -
https://pp.userapi.com/c850628/v850628748/8dfae/FO...
при нажатии на него надпись - "Масса хлеба (кг)" поднимается вверх, уменьшается и меняет цвет,
при этом появляются стрелки для изменения вводимого числа -
https://pp.userapi.com/c850628/v850628748/8dfa0/Ut...
Когда поле для ввода пустое и мы кликаем по нему, с помощью события body onclick,
поле для ввода становится в исходное состояние и всё нормально.
Но!
Если мы кликаем не на страницу, не на body, а на консоль или пуск, то происходит следующее:
https://pp.userapi.com/c850628/v850628748/8dfb5/Z-...
поле ввода стаёт в исходное состояние, а стрелки не пропадают.
пробовал это изменить с помощью наложения события blur на поле ввода, чтобы, при пропадании фокуса на поле и при одновременной пустоте поля, стрелки пропадали.
Тогда они, стрелки, уходят тогда, когда нужно, но когда нажимаешь на пустое поле, и на появившиеся стрелки, то стрелки перестают работать и вместо изменения значения поля они пропадают и поле возвращается в исходное положение, как с самого начала.
Также пробовал создать дополнительное условие для blur , чтобы узнать размер или цвет надписи, которая изменяется при фокусировании, но это не помогло, а когда в консоли выводил цвет элемента, он не менялся, хотя надпись в поле по прежнему изменялась при фокусировании.
Ума не приложу, как это исправить.
Средний