Good day! I would like to ask how could I close a div (a dialog box) using the enter key; I have this code:
<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>
It is like this, I want the user to fill up the form I made, after pressing send (which is a div) it will display a message (a div or a dialog box I made that is hidden); how could I close this dialog box upon pressing the enter key?
If possible only javascript no jquery please.
Good day! I would like to ask how could I close a div (a dialog box) using the enter key; I have this code:
<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>
It is like this, I want the user to fill up the form I made, after pressing send (which is a div) it will display a message (a div or a dialog box I made that is hidden); how could I close this dialog box upon pressing the enter key?
If possible only javascript no jquery please.
Share Improve this question asked Feb 27, 2014 at 8:57 user3359630user3359630 891 gold badge2 silver badges6 bronze badges 1- it is not exactly on the form field that they should press the enter key, it is when they press the send button (which is a dialog box I made or a div) and when that message shows it will say message successfully sent! on a dialog box, and after the message appears I want the user to close the box using the enter key not just using the onclick div (or OK box), is it possible to close this div (hidden at first but will bee visible after onclick) using the enter key? – user3359630 Commented Feb 27, 2014 at 9:19
6 Answers
Reset to default 3With jQuery:
$(document).keypress(function(e) {
if(e.which == 13) {
$('.YOURDIVCLASSNAME').hide();
}
});
Without 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>
This works for both key press and click and make the div visible
<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>
$(function () {
$(document).keyup(function (e) {
if(e.keyCode === 13)
$('#divid').hide();
});
});
my answer is jquery.. if you want the div to be visible upon clicking... just use
$(this).click(function(){
$('div').show();
});
or
$(this).click(function(){
$('div').css('visibility', 'visible');
});
if you want to hide... just change the 'visible' to 'hidden'
Hope it helps... even it is jquery :D
Other answers: The $ function is jQuery (or Prototype) and he did not want that.
Usually <input type=submit> would do it. The enter key would default to sending the form, unless focus is in an textarea.
JavaScript only (no Jquery) as requested:
Give the box an id to make it easier to target:
<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";
}
};