javascript avoid enter key press - javascript

I'm trying to detect an Enter key press event when a button has been clicked.
I'm new in javascript and don't know the good way to go...
HTML:
<div id="div"> Only execute javascript on click, not enter key press </div>
JAVASCRIPT:
$("#div").click(function () {
/* IF ENTER KEY PRESSED, RETURN FALSE */
$("#div").keypress(
function(event){
if (event.which == '13') {
event.preventDefault();
alert('clicked');
}
});
/* Div has been clicked, continue code... */
});
This doesn't work...
Maybe there is a better way:
$("#div").MOUSE_CLICK_EVENT(function () {});

You need to stopPropagation like:
$('#div').keydown(function(event){
if (event.which == '13') {
event.preventDefault();
event.stopPropagation();
}
});
stopPropagation: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

As others have noted, you need stopPropagation in addition to preventDefault, and you should be listening for the keydown event rather than keypress.
The pure JavaScript way to do this is:
document.getElementById('div').onkeydown = function (evt) {
if (evt.which === 13) {
evt.preventDefault();
evt.stopPropagation();
return false;
}
};
document.getElementById('div').onclick = function (evt) {
// do whatever you want here
};

try this if still needs anybody. Quick solution.
$("form").keypress(function(e) {
//Enter key
if (e.which == 13) {
return false;
}
});

Also you need to consider 3 key events: keydown, keypress and keyup.
$("#ID").keydown (function (e) {
if ( e.key == 'Enter') {
e.preventDefault();
e.stopPropagation();
return false;
}
});
$("#ID").keyup (function (e) {
if (e.key == 'Enter') {
e.preventDefault();
e.stopPropagation();
return false;
}
});
$("#ID").keypress (function (e) {
if (e.key == 'Enter') {
e.preventDefault();
e.stopPropagation();
return false;
}
});

Related

How I can detect Key "Enter" on "input" event? [duplicate]

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);
}
}

preventDefault not working with tinyMCE keydown event

When binding on the 'keydown' event on a tinyMCE editor instance, calling preventDefault() on the event does not prevent the default behavior in the editor. For example, when capturing the ENTER key being pressed with the following code:
tinymce.init({
selector: 'textarea',
setup: function (editor) {
$(editor).on('keydown', function (event) {
if (event.which == 13) {
alert('enter pressed');
event.preventDefault();
}
});
}
});
TinyMCE still inserts a line break. How can I override this behavior?
Change
if (event.which == 13) {
alert('enter pressed');
event.preventDefault();
}
to
if (event.which == 13) {
alert('enter pressed');
event.preventDefault();
event.stopPropagation();
return false;
}

How to simulate tab key with enter key on javascript

<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
if (event.keyCode == 13) {
event.keycode=9;
return event.keycode;
}
});
});
}
</script>
here i'm using above script to fire tab key press event when i press the enter key.but it doesn't behave as tab key pressed when i press the enter key.
please help me here..
return event.keycode is effectively return 9, and even return event will not help, as returning the event does not mean that will be handled properly, what you probably want to do instead is to take the enter event and then manually change focus to the next required field:
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
$(this).next("input, textarea").focus()
}
});
});
}
It will not simulate until you prevent the default enter key event.
event.preventDefault(); should be the first command of your function.Then implement the tab key event.Your code should be something like this :
<script type="text/javascript">
function onDataBound(e) {
$("#batchgrid").on("click", "td", function (e) {
$("input").on("keydown", function (event) {
event.preventDefault();
if (event.keyCode == 13) {
event.keycode=9;
return event.keycode;
}
});
});
}
</script>
Hope it will work.

Disable a key press event through JavaScript

I need to disable shift keypress event in my site by using JavaScript or any other method.
Below is my code:
$(document).ready(function() {
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
}
else if (e) {
keycode = e.which;
}
//alert(keycode);
if (keycode == 16) {
alert(keycode);
return false;
}
}
});
// bind an event listener to the keydown event on the window
window.addEventListener('keydown', function (event) {
// if the keyCode is 16 ( shift key was pressed )
if (event.keyCode === 16) {
// prevent default behaviour
event.preventDefault();
return false;
}
});
http://api.jquery.com/keypress/
In addition, modifier keys (such as Shift) trigger keydown events but not keypress events.
Try this
$('#target').keydown(function(event) {
if (event.shiftKey) {
event.preventDefault();
}
}
document.onkeydown = function (e) {
var e = e || event;
if (e.shiftKey === true) {
return false;
}
};
You may try this:
jQuery(document).keydown(function(e){
if(e.which === 16) {
e.preventDefault();
return;
}
console.log(e.which);
});
See demo.
Use Firebug and check console output.

keydown Event to override return key does not work in Firefox

I have the following simple javascript code, which handles the Return Key, I don't want to submit the form when the return key is pressed in the textbox.
All this works fine, but in Firefox, if i show an alert message, then it stops working and the form starts getting submitted, whereas the exact code without alert message works fine and stops the form from being submitted. I dont understand why alert is spoiling the party..
$("document").ready(function () {
$("#input1").keydown(OnKeyDown);
});
function OnKeyDown(e) {
if (e.keyCode == 13) {
// alert('this will fail'); // Adding alert makes the form submit
stopBubble(e);
return false;
}
}
function stopBubble (e) {
// If an event object is provided, then this is a non-IE browser
if (e && e.stopPropagation)
// and therefore it supports the W3C stopPropagation() method
e.stopPropagation();
else
// Otherwise, we need to use the Internet Explorer
// way of cancelling event bubbling
window.event.cancelBubble = true;
}
<input type="text" id="input1" value="">
I don't really know if the event is normalized or not. But this is how I have to do it for it to work in all browsers:
$(whatever).keypress(function (e) {
var k = e.keyCode || e.which;
if (k == 13) {
return false; // !!!
}
});
jQuery normalizes this already, you can just do:
$(document).ready(function () {
$("#input1").keydown(OnKeyDown);
});
function OnKeyDown(e) {
if (e.which == 13) { //e.which is also normalized
alert('this will fail');
return false;
}
}
When you do return false from a handler, jQuery calls event.preventDefault() and event.stopPropgation() internally already. You can also do the anonymous function version:
$(function () {
$("#input1").keydown(function() {
if (e.which == 13) return false;
});
});
textBox.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
if (typeof (e.preventDefault) == 'function') e.preventDefault();
if (typeof (e.stopPropagation) == 'function') e.stopPropagation();
if (typeof (e.stopImmediatePropagation) == 'function') e.stopImmediatePropagation();
e.cancelBubble = true;
return false;
}
}

Categories

Resources