How to catch pressing of Escape button in textarea? - javascript

I have the following code:
$('.field').keypress(function(event) {
if (event.keyCode == 27) alert(event.keyCode);
});
I need to catch "Escape" pressing and do some actions. But now it code does't work. I have tried to use this code:
$('.field').keypress(function(event) {
alert(event.keyCode);
});
I was pressing by Escape button, but it didn't work (I haven't seen any alerts). Please, tell me, how can I fix it?

Use keydown or keyup rather than keypress. keypress only fires for keystrokes that result in characters, which (by convention) Esc doesn't (even though some charsets, such as ASCII, do have a character called "escape").
For more about handling keystrokes in JavaScript: JavaScript Madness: Keyboard Events

Related

Key events are not raised when escape key is pressed on a focused element

I want to know when the Esc key is pressed on an input element. On Chrome 47.0.2526.106 m, the Esc key removes the focus, but JavaScript cannot catch the keyup, keydown, or keypress events.
Demo: https://jsfiddle.net/gstvj9uq/
$("input").keydown(function() {
alert('keydown');
});
$("input").keyup(function() {
alert('keyup');
});
$("input").keypress(function() {
alert('keypress');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text">
Can anyone give a solution to catch Escape key down/up/press event on an input? IE 10 can catch the event, however.
Had the same problem, turned out to be the vimium extention. Without that, focus is not lost on pressing escape.
Note that the keypress event is never fired for escape, only keydown and keyup

onKeyDown event not fired for some character keys

In my webpage I have a div, for which onkeydown event is handled. The onkeydown event is fired for keyboard keys character key 'z','a','p' etc. But the for the character key such as 'x','f','m','q' etc event is not fired . After pressing character key'f' I could see that the focus moves to the next element. Anyone please explain how this occur?
I could see the same happens in Chrome (version: 32) , IE (version:11) , Firefox (version:27)
Some keys might be used for some default operation by a browser. For example Enter submits a form in whitch the div is in IE. Try to use e.preventDefault(); before your own event code. Try the code below.
$(document).on("keydown", "mydiv", function(e) {
e.preventDefault();
});

How to disable enter key in input field

I am trying to stop the enter key from triggering all actions from other scripts on input fields.
Here is the code I am using:
$(document).bind("keydown", function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
// alert('enter pressed');
e.preventDefault();
return false;
}
});
An example of the code in action is here http://jsfiddle.net/8SJYn/ ,
It should be disabling enter but it is not.
Opinions?
You can do it by turning off the keydown and blur events for the input created by the tagit for this element alone.
Try this:
$('#myTags + ul .ui-autocomplete-input').off('keydown').off('blur');
http://jsfiddle.net/JzJRY/
Go into tag-it.js, and on line 245, find this part and remove it:
event.which === $.ui.keyCode.ENTER
JavaScript events have a "bubbling" phase, where they fire first on the inner-most DOM element, and then work their way up to the top-level document. If you try to stop the event at the document level, as in your example code, it is too late.
In some browsers (Firefox, for one) there is a "capturing" phase that occurs before the bubbling phase, and it works in the opposite direction: from top down. You cannot add a capturing phase event handler using jQuery. You must use the native addEventListener function and pass true as the third parameter. If you add the code below into your jsfiddle, it will prevent the Enter keydown event in some browsers.
document.addEventListener('keydown', function (e) {
if (e.keyCode === 13) {
// alert('Enter keydown');
e.stopPropagation();
}
}, true);
Be aware that the tag-it control in your jsfiddle also performs its text-to-tag conversions on blur, so if you uncomment the alert statement above, it will perform its text-to-tag conversion anyway, because of the blur event that occurs when the alert message is displayed.
Lastly, if you want to prevent not just other scripts from processing the Enter keydown, but also the browser itself, add an e.preventDefault(); line to the above.

Setting pc delete button with javascript or jquery

I want to catch the event with javascript or jquery when user presses to the delete button in keyboard. Is this possible?
I'm not sure why you're being told that this is impossible?
The delete key is 46, so this should work:
$('html').keyup(function(e){
if(e.keyCode == 46){
//delete key has been pressed.
}
})
Also note: You should be using either the keyup or keydown event rather than keypress. keypress is intended for real character. 'keyup'/'keydown' is handled at a lower level so it will capture all non-printing keys like DEL and ENTER.
Source is here: Capturing "Delete" Keypress with jQuery
$('html').keyup(function(e){
if(e.keyCode == 46)alert('Delete Key Pressed')
})
from here

Javascript/JQuery: how to add keypress/blur event that doesn't trigger twice with alert box? IE only

I have an input field that I would like to validate on when the user either presses enter or clicks away from it, for this I use the events keypress and blur. If the input fails validation, an alert box is called.
I noticed that in IE (all versions), if I press enter with invalid input, for some reason both the keypress and blur events are fired (I suspect it's the alert box, but it doesn't do this on FF/Chrome) and it shows two of the same alert box. How can I have it so only one is shown?
EDIT: In FF/Chrome, I now noticed that a second alert box appears when I click anywhere after I try to validate with enter.
Simplified code:
$("#input-field").keypress(function(event) {
if (event.keycode == 13) {
event.stopPropagation();
validate();
return false;
}
});
$("#input-field").blur(function() {
validate();
});
function validate() {
if ($("#input-field").val() == '') {
alert("Invalid input");
}
}
EDIT: Ah-ha. Not really a fix but a separate detail I forgot - I need to restore the invalid input to its previously valid value, so when the validate function checks the value again it doesn't fail twice.
I ended up just checking for an IE UserAgent and skipping the keypress event for IE (binding keypress and blur to the same function, as below). Not a direct or terrific solution, tragically, but I've been looking to solve the same problem to no avail. Some minor notes that might be helpful: jQuery normalizes which, so you can confidently use e.which == 13 with keypress. I'd also combine the functions into one bind, e.g.
$("#input-field").bind('blur keypress', function(e) {
if(e.which == 13) {
// keypress code (e.g. check for IE and return if so)
}
validate();
});
I've tried setting globals and using jQuery's data() to assign arbitrary flags to indicate whether (in your case) validation has already been triggered for the element, but the events trigger simultaneously or at least, if sequentially, rapidly enough that even with an opening line setting some flag to true did not do the trick. I'd read that putting in a tiny callback delay might help, but that is hella dirty and I wouldn't do it even as a workaround so I've not tested it. stopPropagation() and preventDefault() also did not help.
Firefox does not get the keypress event right. Those events are only triggered when a key combination that produces a character is pressed (which is not the same as pressing any key).
Use keydown instead (as this is probably the only event IE handles correctly - as it should, since MS "invented" it ;-) ).
See http://www.quirksmode.org/dom/events/keys.html.

Categories