keypress event is not fired when we press enter key - javascript

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

Related

Allow only enter keypress

I need to create a jQuery script to ignore the execution of the keyup or keypress event listener function and execute it only if I press the Enter key on the keyboard.
$(document).on("keypress", "input", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode != 13) {
console.log('Not enter')
} else {
}
});
Search for event.preventDefault() on the jQuery docs
$(document).on("keypress","input", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode != 13) {
console.log('Not enter')
} else {
e.preventDefault(); // prevent default action if not enter
}
});

Enter keypress is not detected on keypress function

I am trying to detect enter key press inside tinmyce editor and it's working fine for all the keys but its not working for enter key.
setup : function (instance) {
instance.on("keypress", function(e) {
var Keycode = (e.keyCode ? e.keyCode : e.which);
alert(Keycode);
});
}
In above code its alerting all the keys except ENTER. i don't know whats the issue there.
keypress wasn't working for me , but keydown worked for me.
setup : function (instance) {
instance.on("keydown", function(e) {
var Keycode = (e.keyCode ? e.keyCode : e.which);
alert(Keycode);
});
}
I think this will work, i've tested it and it works in this fiddle with jquery 2.24
$(document).keypress(function(e) {
if (e.which == 13) {
console.log('You pressed enter!');
} else {
console.log('You pressed ' + e.which);
}
});
body {
height: 500px;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
</body>
EDIT: Sorry i only noticed after that this was also tagged as tinymce
I think you can do this by slightly adjusting your function
//tinyMCE.init({
setup : function(instance) {
instance.onKeyDown.add(function(instance, event) {
if (event.keyCode == 13) { //enter
event.preventDefault();
event.stopPropagation();
//do stuff here
//alert("Enter!");
}
else{ alert (event.keyCode);}
});
}
//});
EDIT 2:
In the current tiny mce docs, there is an example of a function [in setup].
maybe try
tinymce.init({
selector: 'textarea', // change this value according to your HTML
setup: function(instance) {
instance.on('keypress', function(e) {
if (event.keyCode == 13) { //enter
event.preventDefault();
event.stopPropagation();
//do stuff here
//alert("Enter!");
}
else{ alert (event.keyCode);}
});
}
});
note the tinymce is now all lowercase..
Try this :
$(function () {
$("#MYTEXTBOX").keyup(function (e) {
alert(e.keyCode);
});
});
onkeypress does not detect some special keys like ctrl, shift arrow keys etc. Use onkeypress or onekyup instead.

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/

Prevent Form submitting and hitting keyup event handler not working

Having some problem cross browser. I need to Support IE7-9, my site is set to IE7 standards - cannot be changed. Then i need to support latest chrome, safari and firefox.
I want to hit a keyup event in a textbox on enter. Problem is i have a keypress event added to the form on that page which is submitting the form which i dont want to happen.
Sample application would be like this.
JAVASCRIPT:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
//if (!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
//e.preventDefault();
}
});
$("#myInput1").bind("keyup", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});​
HTML
<li onkeypress="alert('hi')">
<input id="myInput1" type="text" />
<div id="log1"></div>
<div id="log2"></div>
</li>
If i use e.preventDefault() - keyup event is not hit, if i dont use it, page is posting back.
I want to see "Key up - Enter pressed - input event" to be written to screen on pressing enter, across all browsers.
Any help would be appreciated. Thank you.
Finally was able to do it like this:
$(document).ready(function () {
$("form").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
$("#log1").append("Key press - Form event");
}
});
$("#myInput1").bind("keypress", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (e.keyCode != 13) {
return true;
}
$("#log2").append("Enter pressed - input event");
e.stopPropagation();
sampleE = e.keyCode;
$("#myInput1").trigger("keyup");
return false;
});
$("#myInput1").bind("keyup", function (e) {
if (!e.keyCode)
e.keyCode = sampleE;
if (e.keyCode != 13) {
return true;
}
$("#log1").append("Key up - Enter pressed - input event");
});
});
var sampleE = null;
I know this is not the best of the options but this is working. Thanks All.

Categories