Hide Input Text when click anywhere in the page

Question

When user clicks the link, the input text shows. But how can I hide the input text when user clicks anywhere in the page (no need to click the link again to hide it)?

Here is my code

function showOrHide(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == "block") {
   abra.display = "none";
   } else {
   abra.display = "block";
  } 
  return false;
  } else {

  return true;
 }
}

using

<a href="#" onclick="return showOrHide('menulink');">click to show or hide menu</a>
  <ul id="menulink">
   <li><input type="text" /></li>

  </ul>

Also really no need to test for document.getElementById unless you want to support IE4 — mplungjan, Jun 30 '15 at 09:51
Thank you Amit. But I want the input text not hide when I click it to input some text. :( — Joe, Jun 30 '15 at 13:33

mplungjan · Accepted Answer · 2015-06-30T13:47:34.023

Try this plain JS version

function toggle(objID,show) {
  var obj = document.getElementById(objID);
  obj.style.display=show?"block":"none";
}
window.onload=function() {
  
  document.getElementById("link").onclick=function() {
    toggle("menulink",true);
    return false;
  }
  document.getElementById("menulink").onclick=function(e) {
    var event = e?e:event;
    event.stopPropagation(); // be careful here.
  }
  document.onclick=function(e) {
    var event = e?e:event;
    var target = e.target?e.target:e.srcElement;
    if (target.id !="link" && 
        target.id != "menulink") toggle("menulink",false);
  }
}

#menulink { display:none }

<a href="#" id="link">click to show or hide menu</a>
<ul id="menulink">
  <li><input type="text" /></li>
</ul>

If you have jQuery it would be

$(function(){

  $("#link").on("click",function(e) {
    e.preventDefault()
    $("#menulink").toggle(true);
  });
  $("#menulink").on("click",function(e) {
    e.stopPropagation(); // watch out here...
  });
  $(document).on("click",function(e) {
    if (e.target.id!="link") $("#menulink").toggle(false);
  });
});

#menulink { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="link">click to show or hide menu</a>
<ul id="menulink">
  <li><input type="text" /></li>
</ul>

Thank you mplungjan. Almost perfect, but I want the input text not hide when I click it. I prefer using your javascript code than Jquery — Joe, Jun 30 '15 at 13:29
I already tried it, and now the input text not hide when I click outside the input text. :( — Joe, Jun 30 '15 at 13:46
try again. I misspelled document.getElementById in the first example — mplungjan, Jun 30 '15 at 13:48

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Try this:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).mouseup(function (e)
{
var container = $("#menulink input[type=text]");

if (!container.is(e.target) 
    && container.has(e.target).length === 0) 
{
    $("#menulink input[type=text]").hide();
}
});
<script>

Source here

edited May 23 '17 at 12:14

Community

1
1

answered Jun 30 '15 at 09:53

Clyde Winux

285
1
3
12

Post source with your answer as well, so that OP can learn more. **[SOURCE of this code](http://stackoverflow.com/a/7385673/4365626)** – Vibhor Dube Jun 30 '15 at 09:56
jQuery was not tagged – mplungjan Jun 30 '15 at 10:00
Sorry Clyde, I'm not using Jquery. But thank you for your help – Joe Jun 30 '15 at 13:30

Hide Input Text when click anywhere in the page

2 Answers2