单击页面中的任意位置时隐藏输入文本答案

【问题标题】：Hide Input Text when click anywhere in the page单击页面中的任意位置时隐藏输入文本
【发布时间】：2015-06-30 09:46:44
【问题描述】：

当用户点击链接时，会显示输入文本。但是当用户点击页面中的任意位置时如何隐藏输入文本（无需再次点击链接来隐藏它）？

这是我的代码

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;
 }
}

使用

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

  </ul>

【问题讨论】：

点击文档可以隐藏输入文本。
也真的不需要测试 document.getElementById 除非你想支持 IE4
阿米特，你能给我举个例子吗？谢谢
这里是小提琴fiddle.jshell.net/wcL42bcz
谢谢阿米特。但是我希望输入文本在单击以输入一些文本时不会隐藏。 :(

标签： javascript html

【解决方案1】：

试试这个纯 JS 版本

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>

如果你有 jQuery，那就是

$(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>

【讨论】：

谢谢你 mplungjan。几乎完美，但我希望输入文本在单击时不会隐藏。我更喜欢使用你的 javascript 代码而不是 Jquery
我在 menulink 中添加了 stopPropagation。- 应该这样做
我已经尝试过了，现在当我在输入文本之外单击时输入文本不会隐藏。 :(
再试一次。我在第一个示例中拼错了 document.getElementById

【解决方案2】：

试试这个：

<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

【讨论】：

也发布您的答案的来源，以便 OP 可以了解更多信息。 SOURCE of this code
jQuery 没有被标记
对不起克莱德，我没有使用 Jquery。不过谢谢你的帮助