Как правильно отследить событие, чтобы скрыть нужные элементы?

Question

[Глеб Сугак]

Ссылка на код в github - https://github.com/GreatGleb/Recipes-of-sandwiches
У меня есть поле для ввода текста (числа) -
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 , чтобы узнать размер или цвет надписи, которая изменяется при фокусировании, но это не помогло, а когда в консоли выводил цвет элемента, он не менялся, хотя надпись в поле по прежнему изменялась при фокусировании.
Ума не приложу, как это исправить.

Comments

[Виталий Киренков]

А чего вы добиться то хотите? Вы описали проблему, а какая задача?

[Глеб Сугак]

Виталий Киренков, задача в том, чтобы исправить проблему - появление стрелок при нажатии не на html-страницу.
Нужно сделать так, чтобы стрелки появлялись только тогда, когда это нужно, и чтобы, при этом они правильно работали. Как это сделать я не знаю, поэтому прошу совета.

[Дмитрий Алп]

Виталий Киренков, задача видимо в решении этой проблемы )))

[Виталий Киренков]

Глеб Сугак, Такс, а можете показать, как это выглядит, если есть введённое значение? Я просто не понимаю, как оно схлопывается.

И ещё, мне кажется, что вы зря усложняете это js-ом. Объясню мысль:
Стрелки должны быть видны, если вводится какое значение в поле, верно? Значит это поле должно быть в фокусе, значит можно ограничиться css селектором.

<div>
  <input />
  <div class="arrows" />
</div>

.arrows { display: none; }
input:focus + .arrows { display: block; }

[Глеб Сугак]

Виталий Киренков, попробую ваше решение и напишу или помогло.
А вот ссылка на код в github - https://github.com/GreatGleb/Recipes-of-sandwiches,
если вы её не заметили.

[Виталий Киренков]

Глеб Сугак, видел, но, простите, такое кол-во js кода мне причиняет боль, особенно когда в него впихнуты стили, и это можно решить простым добавление класса, а стили все располагать в css.

+ в рамках функций вы по 10 раз ищите элемент по ид, когда это можно сделать 1 раз и сохранить в переменную, что сделает код в разы меньше и читабельней.

[Глеб Сугак]

Виталий Киренков, всё же ваше решение не подходит.
В этом случае, когда поле пустое, при нажатии на стрелки,
поле становится несфокусированным и стрелки пропадают, поле становится в исходное состояние и значение в поле поменять не удаётся. Это из-за того, что стрелки, как и остальная часть страницы, кроме самого поля, не являются полем ввода. И когда поле пустое, нажатие на любую часть страницы делает его несфокусированным.

[Виталий Киренков]

Глеб Сугак, Ок, значит с js.

https://codepen.io/vitaliy_kirenkov/pen/YddpqG

Идея понятна? Дальше это нужно правильно раскатать.

[Глеб Сугак]

Виталий Киренков, уже своими силами справился, прикрепив к body событие onblur и при отсутствии значения у поля делал стрелки видимыми.
Так у меня всё правильно заработало.

[Виталий Киренков]

Глеб Сугак, Чудно!