JavaScript Backspace Keycode doesn't work - javascript

The Keycode for the Backspace just doesn't work I tried it in IE and Google Chrome and it doesn't display anything neither in the console nor the alert Code:
$(document).keypress(function(e) {
console.log(e.which);
if (e.which == 13) {
window.alert("enter");
} else if (e.which == 8) {
window.alert("backspace");
} else {
$("#prompt").append(String.fromCharCode(e.which));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

keyPress event is invoked only for character (printable) keys, keyDown event is raised for all including nonprintable
$(document).keydown(function(e) {
console.log(e.which);
if (e.which == 13) {
window.alert("enter");
} else if (e.which == 8) {
window.alert("backspace");
} else {
$("#prompt").append(String.fromCharCode(e.which));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
References

You should use the keyup instead of keypress event, as certain keys (such as backspace) will not cause that event to fire.
$(document).keyup(function(e) {
console.log(e.which);
if (e.which == 13) {
window.alert("enter");
} else if (e.which == 8) {
window.alert("backspace");
} else {
$("#prompt").append(String.fromCharCode(e.which));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

The keypress event is only evoked on printable keys. To print any key, you'll want to use the onkeydown event. It's raised for all including nonprintable such as Control, Shift, Alt, BackSpace, etc. Read more about they onkeydown event here: https://api.jquery.com/keydown/
Here's an example of how it would turn out:
$(document).keydown(function(e) {

Use keyup instead of keypress to get all the key codes
$(document).keyup(function(e) {
console.log(e.which);
if (e.which == 13) {
window.alert("enter");
} else if (e.which == 8) {
window.alert("backspace");
} else {
$("#prompt").append(String.fromCharCode(e.which));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

I can't capture enter key in select2

I am using select2, and I need to capture the enter key, but I can't.
I used:
$(document).on('keydown', '.select2-input', function (ev) {
if (ev.which == 13) {
alert('press enter')
}
if (ev.which == 9) {
ev.preventDefault();
ev.stopImmediatePropagation();
alert('press tab')
}
});
I can capture all the keys but for the enter.
Can someone help me?
Try this, it's essentially the same thing:
$(document).on('keyup keypress keydown', ".select2-input", function (e) {
if (e.which == 13) {
console.log("Pressed enter!");
}
});
#Anon's code works!
I'm using Select2 4.0.3 and I just remove keypress and keydown events:
$(document).on('keyup', '.select2-search__field', function (e) {
if (e.which === 13) {
alert('Pressed enter!');
}
});
Try this out:
$('select2-search-field > input.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
alert('enter key event');
});

How do I trap enter from form except textarea

In a dynamic form, I have the following code to trap 'enter' key.
$(document).bind('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Occasionally, there is an element like HTMLTextAreaElement which accept 'enter' key.
how do I unbind preventDefault only for HTMLTextAreaElement.
TIA.
Try this:
if (e.which == 13 && e.target.localName !== 'textarea') {
$("html *:not(textarea)").bind('keypress', function (e) {
if (e.keyCode == 13) {
e.preventDefault();
}
});
Demo: http://jsfiddle.net/DerekL/4JWLb/

Jquery key press event not triggered on enter

$("#username,#password").keypress(function(e)
{
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
The keypress event not calling if the enter button is pressed.
Try using keyUp event.
Live Demo
$("#username,#password").keyup(function(e){
//alert('');
if(e.keyCode == 13)
{
signIn();
}
});
This is also working with keypress
Live Demo
$("#txt1").keypress(function(e) {
if (e.keyCode == 13) {
//signIn();
alert("keypress");
}
});​
Key down is more appropriate:
$("#username,#password").keydown(function(e){
if(e.keyCode == 13)
{
signIn();
}
});
Use e.which instead of e.keyCode because this is what jQuery guarantees to be on event
Try e.preventDefault(), because without it (if they are in a form) the form submits
Maybe the best would be listening on form's submit event
Are you sure it's not the signIn (); function that's faulty? Because this seems to work just fine; http://jsfiddle.net/vDkBs/1/
Use keypress and which statement:
$("#username,#password").keypress(function(e) {
if (e.which == 13) {
//call here your function
}
});

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

Detect the Enter key in a text input field

I'm trying to do a function if enter is pressed while on specific input.
What I'm I doing wrong?
$(document).keyup(function (e) {
if ($(".input1").is(":focus") && (e.keyCode == 13)) {
// Do something
}
});
Is there a better way of doing this which would say, if enter pressed on .input1 do function?
$(".input1").on('keyup', function (e) {
if (e.key === 'Enter' || e.keyCode === 13) {
// Do something
}
});
// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.
event.key === "Enter"
More recent and much cleaner: use event.key. No more arbitrary number codes!
NOTE: The old properties (.keyCode and .which) are Deprecated.
const node = document.getElementsByClassName("input1")[0];
node.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// Do work
}
});
Modern style, with lambda and destructuring
node.addEventListener("keyup", ({key}) => {
if (key === "Enter") {
// Do work
}
})
If you must use jQuery:
$(document).keyup(function(event) {
if ($(".input1").is(":focus") && event.key == "Enter") {
// Do work
}
});
Mozilla Docs
Supported Browsers
$(document).keyup(function (e) {
if ($(".input1:focus") && (e.keyCode === 13)) {
alert('ya!')
}
});
Or just bind to the input itself
$('.input1').keyup(function (e) {
if (e.keyCode === 13) {
alert('ya!')
}
});
To figure out which keyCode you need, use the website http://keycode.info
Try this to detect the Enter key pressed in a textbox.
$(function(){
$(".input1").keyup(function (e) {
if (e.which == 13) {
// Enter key pressed
}
});
});
The best way I found is using keydown ( the keyup doesn't work well for me).
Note: I also disabled the form submit because usually when you like to do some actions when pressing Enter Key the only think you do not like is to submit the form :)
$('input').keydown( function( event ) {
if ( event.which === 13 ) {
// Do something
// Disable sending the related form
event.preventDefault();
return false;
}
});
It may be too late to answer this question. But the following code simply prevents the enter key. Just copy and paste should work.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
The solution that work for me is the following
$("#element").addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// do something
}
});
Try this to detect the Enter key pressed in a textbox.
$(document).on("keypress", "input", function(e){
if(e.which == 13){
alert("Enter key pressed");
}
});
DEMO
A solution that worked for me is this:
<input onkeydown="if (event.key == 'Enter'){//do logic}else{}">
$(document).ready(function () {
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
// Do something
}
});
});
This code handled every input for me in the whole site. It checks for the ENTER KEY inside an INPUT field and doesn't stop on TEXTAREA or other places.
$(document).on("keydown", "input", function(e){
if(e.which == 13){
event.preventDefault();
return false;
}
});
Here is what I did for my angular project:
HTML:
<input
class="form-control"
[(ngModel)]="searchFirstName"
(keyup)="keyUpEnter($event)"
/>
TypeScript:
keyUpEnter(event: KeyboardEvent) {
if (event.key == 'Enter') {
console.log(event);
}
}

Categories