How to run javascript on keypress without an input field? - javascript

I'm writing a simple web site and would like to run some simple javascript when the user presses a button on their keyboard. Something as simple as running alert("Hello!"); or showing a modal box when the user presses enter would do.
After searching for a good while, I've only been able to find solutions that work if the page contains an input text field. Is it possible without it?

Yes, it is possible to do so, and here's how you'd do it:
document.body.addEventListener("keydown", function(event) {
if (event.keyCode == 13) {
alert("Hello! You pressed the enter key!");
}
});

Yes, you can actually use eventListener for this. For example, check out this sample page.
<html>
<body>
<script>
document.addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
alert('You just hit enter.');
}else if(event.keyCode ==65){
alert('You just press A.');
}else if(event.keyCode==97){
alert('You just hit a.');
}else{
alert('You press something other than A, a and ENTER key');
}
})
</script>
</body>
</html>
In order to get the keycode for the various keypress you can use this:
<html>
<body>
<p>Press a key on the keyboard in the input field to get the KeyCode for that key.</p>
<input type="text" size="40" onkeypress="getKeyCode(event)">
<p id="keyCode"></p>
<script>
function getKeyCode(event) {
var x = event.which || event.keyCode;
document.getElementById("keyCode").innerHTML = "The keyCode is: " + x;
}
</script>
</body>
</html>

Related

How to call a function with a keyboard without focusing on any textbox?

I know how to trigger a function with a textbox:
<input onkeyup="if (event.keyCode == 13) check(this)" type="text">
But what if I'm not focused on any textboxes, but I still need to call a js function with a space button for example?
Particular context:
I'm trying to write an interactive test, and I want users to be able to switch to the next question not only with the button on the page:
<button id="nextButton" onclick="nextQuestion()">Next</button>
but also with a space button, so they can change questions more quickly. To arrange that, I need to call the nextQuestion() function everytime a user presses space on a keyboard.
Try binding the event to the window
window.onkeyup = function(event){
if (event.keyCode== 32) nextQuestion()
}
With jquery you can do something like
$(window).keypress(function(e) {
if (e.keyCode == 32 || e.keyCode == 0) {
nextQuestion()
}
});
or if you prefer vanilla javascript i recommend
window.addEventListener("keyup", keyPressed(e));
function keyPressed(e) {
if(e.keyCode == 32) nextQuestion();
}
can call keyup on body tag or window object
$("body").keyup(function(event){
alert("KeyCode is : " + event.keyCode);
if(e.keyCode == 32){ nextQuestion()}
});

On Enter fire javascript function

After reading this post here in Stackoverflow, (Detect the Enter key in an text input field) I tried to make a few of my inputs fire on enter... I did not work. I made a simple example and it still doesn't work. Can someone hint as to the proper way? (FYI - Definitely a newbie here)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>On Enter</title>
<script src="../../Scripts/jquery-2.1.0.min.js"></script>
<script>
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
</script>
</head>
<body>
<input type="text"
id="input1"
placeholder="Press Enter When Done">
</input>
</body>
</html>
Thanks
First you need to say #input1 other than .input1, then run it when the entire DOM is ready:
$(document).ready(function(){
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
});
Edit: As #jfriend00 mentioned in a comment it's a good idea to use e.which other than e.keycode. To do so you can change: e.keyCode == 13 to e.which == 13. This way is recommenced by the people at jQuery, as it normalizes e.keyCode and e.charCode.
Change the .input1 in your JS to #input1
When you use . it means it's a class, but you have an ID, which is #.
Your code is triggering a "class", not an "id", so add a "#" instead of a "." in input1:
$("#input1").keyup(function (e) {
if (e.keyCode == 13) {
alert ("It Works");
}
});
first, like the previous answer your criteria is not good. change for ID
second, put your javascript at the and of the file on in the ready document.
Because the javascript is in execution while the documenta as not finish to load . So the event can't be add to an element that doesnt exist.

javascript event onkeypress event won't run

I'm trying to alert the user whenever he/she presses enter. I decided to use javascript for this. I have the following bit of html:
<div id="all">
<h1>Welcome to the awesome chat system.</h1>
<input type="text" id="name"><br/>
<textarea rows='30' id="chatArea" disabled='true'>
</textarea>
<textarea id="writtenThing" onkeypress="keyfunction(e)"></textarea>
<button id="send">Send</button>
</div>
Here is the javascript:
<script>
function keyfunction(e)
{
if(e.keyCode == 13)
{
alert("things to do...");
}
}
</script>
However the problem that I'm facing is that even though I press enter inside the textarea my browser does not alert me. I'm sure I'm using a browser which supports this.
Pass the event to the function:
<textarea id="writtenThing" onkeyup="keyfunction(event)"></textarea>
Add some cross browser support:
function keyfunction(e)
{
if(e.keyCode == 13 || e.which == 13)
{
alert("things to do...");
}
}
JS Fiddle: http://jsfiddle.net/3MF3h/
Use the following javscript.
document.getElementById("writtenThing").onkeypress = function (e)
{
if (e.keyCode == 13)
{
alert("things to do...");
}
}
you can replace onkeypress with onkeyup/onkeydown
Also, correct the code with following:
onkeypress="keyfunction(event)"

Entering previous data with textinput using Firefox

I face a issue when designing a login page. And this issue is only for Firefox.
That is, when I selecting a previous login id and pressing Enter then caused the submit.
in IE and Chrome, it only select the data and doesn't submit.
my code is like :
<input type="text" name="t1"><br>
<input type="text" name="t2"><br>
<script>
document.onkeydown = function(e) {
if (e.which == 13)
// submit
}
</script>
for example :
http://ppt.cc/c048
when I select "123" and press Enter, then my input submit. (for Firefox)
I expect that it only put the id "123" in the text box without doing submit action...
How can it still have the enter submit function without the Firefox issue?
Thank you!!
I don't think I understand your question correctly, but if you can't get the Enter key submit the form in Firefox, try this for your script bit
document.onkeydown = function(e) {
if (e.which == 13 || e.charCode == 13 || e.keyCode == 13) {
// submit
}
this sounds like a problem i was having a while back i fexed it like so
<script>
document.onkeydown = function(e) {
if (e.which == 13) {
e.preventDefault();
// submit
}
}
</script>

jQuery not detecting enter key pressed in textarea

My setup: jQuery 1.6.2
I have this HTML
<textarea class="comment_box"> Write a comment...</textarea>
And the following Javascript
<script>
$('.comment_box').keydown(function (e){
if(e.keyCode == 13){
alert('you pressed enter ^_^');
}
})
</script>
When I press the enter key in the textarea, nothing triggers
EDIT Oops, cut and paste error, I do have $ in my code and it still doesn't work, must be something else going on.
My bad, it is a user operator error, it does work. Sorry for the confusion.
$('.comment_box').keypress(function(event) {
// Check the keyCode and if the user pressed Enter (code = 13)
if (event.keyCode == 13) {
alert('you pressed enter ^_^');
}
});
Thats it
Check out this answer:
jQuery Event Keypress: Which key was pressed?
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
For jQuery you need to use the $ to specify.
$('.comment_box').keyd
should do it.

Categories