我如何隐藏 <div> 并仅在 <textarea> 有重点吗？

Question

I'm using the same editor as Stack Overflow and the HTML looks something like this with multiple editors on a page:

<pagedown-admin id="modal-data-solution-1">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>
<pagedown-admin id="modal-data-solution-2">
   <div>
      <div>
         Menu
      </div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

Is there a way that I could hide the <div> that contains the menu and have it show only when the <textarea> has focus. Note that I'm not using jQuery so it would need to be a vanilla JavaScript solution. I'm just not sure where to start trying to code something like that.

Answer 1

Use onfocus event when you focus the textarea and onblur event when you are losing the focus on it :

function hideDiv(){
   document.getElementById("divID").style.display = 'none';   
}

http://jsfiddle.net/8zm3rw7p/4/

UPDATED :

http://jsfiddle.net/8zm3rw7p/9/

Answer 2

You could attach to the native event handlers a function like it is done in this question , and show/hide the menu.

 (function() { var elm = document.getElementById("textarea"); elm.addEventListener('blur', handler, false); elm.addEventListener('focus', handler, false); function handler(event) { if (event.type === "blur") { document.getElementById("menu").style.display = "none"; } else { document.getElementById("menu").style.display = ""; } } })(); 

 <pagedown-admin id="modal-data-solution-2"> <div id="menu" style="display: none"> <div> Menu </div> </div> <textarea id="textarea"> ABC </textarea> </pagedown-admin> 

Answer 3

Using the example from the question @AlejandroC mentioned, here is one viable solution

 (function() { document.getElementById('first').addEventListener('blur', handler, false); document.getElementById('first').addEventListener('focus', handler, false); document.getElementById('second').addEventListener('blur', handler, false); document.getElementById('second').addEventListener('focus', handler, false); function handler(event) { if (event.type === "blur") { document.getElementById(this.id+'Div').style.display="none"; } else { document.getElementById(this.id+'Div').style.display="block"; } } })(); 

 <pagedown-admin id="modal-data-solution-1"> <div> <div id='firstDiv' style='display:none'> Menu </div> </div> <textarea id='first'> ABC </textarea> </pagedown-admin> <pagedown-admin id="modal-data-solution-2"> <div> <div id='secondDiv' style='display:none'> Menu </div> </div> <textarea id='second'> ABC </textarea> </pagedown-admin> 

Answer 4

Here's an example of a generic solution, that will work with multiple menus based on your markup. The JavaScript could be improved, but it will give you an idea, how to solve it.

HTML

<pagedown-admin>
    <div>
        <div class="off">Menu</div>
   </div>
   <textarea>
         ABC
   </textarea>
</pagedown-admin>

CSS

.off {
    display: none;
}

JavaScript

var tas = document.getElementsByTagName('textarea');

for (var i = 0, j = tas.length; i < j; ++i) {
    tas[i].onfocus = function() {
        var e = this.parentNode.firstElementChild.firstElementChild;
        e.classList.toggle('off');
    }

    tas[i].onblur = function() {
        var e = this.parentNode.firstElementChild.firstElementChild;
        e.classList.toggle('off');
    }
}

Demo

Try before buy

Answer 5

If the structure will always be the same, you can use this method for efficiency.

Select all of the menus using Document.querySelectorAll() , then iterate through them with a for() loop .

In each iteration, set display: none to hide the element, then attach an onfocus event handler and an onblur event handler to its nextElementSibling .

In the onfocus event handler, remove the modified display property from the focused element's previousElementSibling

In the onblur event handler, set display: none on the focused element's previousElementSibling

---

 var menus = document.querySelectorAll('[id^=modal-data-solution] > div'), l = menus.length, i; for(i = 0; i < l; i++) { menus[i].style.display = "none"; menus[i].nextElementSibling.onfocus = handleFocus; menus[i].nextElementSibling.onblur = handleBlur; } function handleFocus() { this.previousElementSibling.style.display = ''; } function handleBlur() { this.previousElementSibling.style.display = 'none'; } 

 <pagedown-admin id="modal-data-solution-1" style="display: block;"> <div> <div> Menu </div> </div> <textarea> ABC </textarea> </pagedown-admin> <pagedown-admin id="modal-data-solution-2" style="display: block;"> <div> <div> Menu </div> </div> <textarea> ABC </textarea> </pagedown-admin>