Javascript 使用enter键关闭div_Javascript_Html

Javascript 使用enter键关闭div

javascript html

Javascript 使用enter键关闭div,javascript,html,Javascript,Html,你好！我想问一下如何使用enter键关闭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:

你好！我想问一下如何使用enter键关闭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>


函数sendbutton（）{
//代码使隐藏的div在onclick时可见
}
.按钮{
高度：25px；
宽度：90px；
}
.sendmessage{
身高：60%；
宽度：60%；
可见性：隐藏；
}

客户名

发送

您的邮件已成功发送
好啊

就像这样，我希望用户填写我制作的表单，按下send（这是一个div）后，它将显示一条消息（一个div或一个隐藏的对话框）；按下enter键后如何关闭此对话框

如果可能，请只使用javascript而不使用jquery。

使用jquery:

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

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

不带jQuery:

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

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


函数myFunction（事件）{
if（event.which==13 | | event.keyCode==13）{
document.getElementById（“yourelement”）.style.display='none'；
返回false；
}
返回true；
}

我的答案是jquery。。如果您希望在单击时显示div。。。只用

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

或

如果你想隐藏。。。只需将“可见”更改为“隐藏”

希望对你有帮助。。。甚至它是jquery:D

其他答案：

函数是jquery（或原型），他不希望这样

通常，

就可以了。除非焦点位于文本区域中，否则回车键默认为发送表单。

仅JavaScript（无Jquery）：

为框指定一个id，以便更容易定位：

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

这适用于按键和单击，并使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>


函数sendbutton（）{
//显示OK按钮发送
if（document.getElementsByClassName（“sendmessage”））{
document.getElementsByClassName（“sendmessage”）[0].style.display='block'；
}
}
document.onkeypress=ok按钮发送；
功能确定按钮发送（e）{
e=e | | window.event；
//回车键有键代码13
if（e.which==13 | | e.keyCode==13）{
if（document.getElementsByClassName（“sendmessage”））{
document.getElementsByClassName（“sendmessage”）[0].style.display='none'；
返回false；
}
}
返回true；
}

最好将显示设置为“无”，因为使用visibility css属性，元素仍然在屏幕上，但不可见，这意味着可能存在一些布局问题。他们不应该完全在表单字段上按enter键，而是在按下send按钮时（这是我制作的对话框或div）当该消息显示时，将显示消息已成功发送！在对话框上，在消息出现后，我希望用户使用enter键关闭该框，而不仅仅是使用onclick div（或OK框），是否可以使用enter键关闭该div（起初隐藏，但在onclick后将变为可见）？请检查下面的答案

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