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');
});
Related
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>
I have founded that if I want to listen on all the document I should do :
$(document).keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
but it doesn't write anything in the console... So I have tried an other version like this:
$(".container.body").keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
this code is in the $(document).ready(function() {});
but nothing happened too...
EDIT:
If I write this code in the web console it works:
So why it doesn't work in my Meteor template code ?
Template.home.onRendered(function() {
$(document).ready(function() {
/*
this method listen if we press "enter" in the research field and click on the button
*/
$('#tftextinput').keypress(function(e) {
if (e.keyCode == 13) {
$('#tfbutton').click();
}
});
$(document).keydown(function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
});
});
the first listener works (the one who listens tftextinput)
Try on window
$(window).on("keydown",function(e) {
console.log(e);
console.log(e.keyCode);
if (e.keyCode == 27) {
$('#tftextinput').value="";
$('#tfbutton').click();
}
});
You could use Template events to do the same:
Template.home.events({
'keydown':function(event){
...
},
'keypress #tftextinput': function(event){
...
}
});
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/
I am facing a problem regarding to the keypress event. When I press the enter key then keypress event is not fired but it is working fine with the other keys.
Here is my code :
$(document).ready(function () {
alert('hi');
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
alert(code);
if (code == 13) { //Enter keycode
//Do something
}
});
});
You should use keyup event for this
$(document).ready(function() {
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keyup(function(e) {
if (e.which == 13) {
//Enter keycode //Do something
}
});
});
Use just e.which as its normalized across keys:
$(document).ready(function () {
alert('hi');
$("#ctl00_popupPageBody_txtFirstName,#ctl00_popupPageBody_txtLastName").keypress(function (e) {
var code = e.which;
alert(code);
if (code === 13) { //Enter keycode
e.preventDefault();
//your code goes here
}
});
});
Note: in my case I bind do .keydown
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);
}
}