Show/hide a div depending on if cursor is in a text field

Question

I have an input text field, and it has a formatting bar above it. I want to hide the bar when the cursor isn't in the input field.

Here is a Jsfiddle for anyone who is able to help.

<div class="header-div">
This is my header div
</div>

<div >
<input placeholder="placeholder text">
</div>

<p class="explainer">
When I've clicked in the input box above (ready to type or currently typing), I want the grey bar above to show, otherwise hide it.
</p>

Note that I'm using Quill for the rich text input, but just want to know the general javascript syntax/concept anyway of how to detect when the input field is active, so it can affect other elements.

Answer 1

You could create listeners for the focus and blur events on the textbox and update the style to show/hide the header. The code below should get you started:

let textbox = document.querySelector('input');
let header = document.querySelector('.header-div');

// add event listeners to textbox
textbox.addEventListener('focus', function() { 
    toggleDisplay(header, true);
});
textbox.addEventListener('blur', function() { 
    toggleDisplay(header, false);
});

function toggleDisplay(element, show) {
    if (show) 
        element.style.display = 'block';
    else
        element.style.display = 'none';
}

.header-div {
  display: none;
  background-color: #ccc;
  padding: 8px;
  border-radius:6px;
  margin-bottom:8px;
}

.explainer {
  color:#aaa;
}

<div class="header-div">
  This is my header div
</div>

<div >
  <input placeholder="placeholder text">
</div>

<p class="explainer">
  When I've clicked in the input box (ready to type or currently typing), I want   the grey bar above to show, otherwise hide it.
</p>