Question

美好的一天！我想问一下如何使用回车键关闭div（对话框）; 我有这段代码：

<script>
function sendbutton(){
//code to make the hidden div visible upon onclick
}
</script>

<style>
.button {
height: 25px;
width: 90px;
}
.sendmessage {
height: 60%;
width: 60%;
visibility: hidden;
}
</style>
</head>
<body>
<form name="reg" id="myform">
<ul>
<li>customer first name</li>
<li><input type="text" id="userfirstname" /></li>
<li><div class="button" onclick="sendbutton(); return false;">send</div></li>
</ul>
</form>

<div class="sendmessage">
<p>your message was successfully sent!</p>
<div class="niokbutton" onclick="okbuttonsend()">ok</div>
</div>

就像这样，我希望用户填写我制作的表格，按下send（这是一个div）后，它会显示一条消息（我创建的div或隐藏的对话框）;如何在按回车键时关闭此对话框？

如果可能的话，只有javascript no jquery please。

Answer 1

使用jQuery：

$(document).keypress(function(e) {
    if(e.which == 13) {
        $('.YOURDIVCLASSNAME').hide();
    }
});

没有jQuery：

<input id="yourelement" type="text" onkeypress="myFunction()">

<script>
function myFunction(event) {
   if (event.which == 13 || event.keyCode == 13) {
      document.getElementById("yourelement").style.display = 'none';
      return false;
   }
   return true;
}
</script>

Answer 2

这适用于按键和单击并使div可见

<script>
function sendbutton(){
   // show okbuttonsend
   if (document.getElementsByClassName("sendmessage")) {
      document.getElementsByClassName("sendmessage")[0].style.display = 'block';
   }
}

document.onkeypress = okbuttonsend;

function okbuttonsend(e) {
    e = e || window.event;
    // Enter key has key code 13
    if (e.which == 13 || e.keyCode == 13) {
       if (document.getElementsByClassName("sendmessage")) {
          document.getElementsByClassName("sendmessage")[0].style.display = 'none';           
          return false;
       }
   }
   return true;
}

</script>

Answer 3

$(function () {
  $(document).keyup(function (e) {
     if(e.keyCode === 13)
     $('#divid').hide();
  });
});

Answer 4

我的答案是jquery ..如果你希望点击时可以看到div ...只需使用

$(this).click(function(){
   $('div').show();
});

或

$(this).click(function(){
   $('div').css('visibility', 'visible');
});

如果你想隐藏......只需将'可见'改为'隐藏'

希望它有所帮助......即使它是jquery：D

Answer 5

其他答案：$函数是jQuery（或Prototype），他不希望这样。

通常<input type=submit>会这样做。输入键默认发送表单，除非焦点在textarea中。

Answer 6

仅按需要JavaScript（无Jquery）：

为该框添加一个ID，以便更容易定位：

<div id="messageBox" class="sendmessage">
<p>your message was successfully sent!</p>
<div class="niokbutton" onclick="okbuttonsend()">ok</div>
</div>

JavaScript的：

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 13) {
        var box = document.getElementById("messageBox");
        box.style.visibility="hidden";
    }
};

使用回车键关闭div

6 个答案: