I am developing a Javascript library (AnyList) in which users may press the ESC key to abort editing an input field. This is implemented by catching the ESC keyup event (using jQuery):
inp_elem.on("keyup", init_opt, $.proxy(this._processKeyup,this));
...
$.any.DataView.prototype._processKeyup = function (event)
{
if (event.preventDefault)
event.preventDefault();
if (event.type == "keyup" && event.which == 27) { // ESC. In Vivaldi, we never get here.
...
}
...
This works fine in Firefox, Edge, Chrome, etc. but not in the Vivaldi browser - the _processKeyup method is never called.
Vivaldi uses the ESC key to stop the loading of a html page but so do other browsers, and even if I delete the ESC keyboard mapping (there is an option for this in Vivaldi), I am not able to catch the ESC event in my Javascript.
Can anybody help? I really like the Vivaldi browser and would like to see it succeed, but this behaviour breaks my script unneccessarily and is quite annoying.
It seems that Vivaldi browser is catching the keyUp event, so you'd better to use keyDown event instead.
A working solution could be something like that:
elem.onkeydown = function (event) {
if (event.type === "keydown" && event.key === 'Escape') {
alert('esc - everywhere');
}
}
Related
I have a project where the arrow keys can be used as a method of input, in most browsers simply using .preventDefault() works perfectly, however Firefox (v37 on both Win8 and OSX) still seems to move the browser window (If there's available off screen scroll-able area)
$(document).keyup(function (evt) {
if (evt.keyCode == 39 || evt.keyCode == 40) { // Right arrow, Down arrow
evt.preventDefault();
// Actual code
} else {
if (evt.keyCode == 37 || evt.keyCode == 38) { // Left arrow, Up arrow
evt.preventDefault();
// Actual code
}
}
})
I've seen some things about using charCode, however my code does run so the .preventDefault() is defiantly being hit.
As far as I can tell, there's no reason this should move the window position.
Am I doing something wrong? Or if not, is there another way to disable the window moving due to arrow keys?
You have to listen keydown event instead of keyup cause the former is always happened prior to the latter. This mean that browser may respond to keydown event before keyup event is happened. In this case you cannot cancel browser's response action (i.e. scrolling) from keyup listener anymore.
I was fiddling with preventDefault() and must be doing something wrong.
$("#input").bind("keypress", function(event) {
if(event.which == 9) {
event.preventDefault();
alert("You pressed tab.");
}
});
The tab functionality isn't prevented. What's wrong with this?
Try this FIDDLE. The input loses focus when you tab. Binding to the body fixes this.
$("body").on("keydown", function(event) {
if(event.which == 9) {
event.preventDefault();
alert("You pressed tab.");
}
});
The keypress event is simply not fired when the Tab is pressed - this also explains why there is no alert, independent of what preventing the default may do.
Changing the code to use keydown allows the Tab to be caught and prevents the default focus-change (in Chrome1, anyway).
$("#input").bind("keydown", function(event) {
if(event.which == 9) {
event.preventDefault();
}
});
1 I tested the above in Chrome 35 with jQuery 1.6-2.1; it does not work under the KO 3.0 library.
From the documentation on JQuery,
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
This method is a shortcut for .on( "keypress", handler ) in the first two variations, and .trigger( "keypress" ) in the third.
The keypress event is sent to an element when the browser registers keyboard input. This is similar to the keydown event, except that modifier and non-printing keys such as Shift, Esc, and delete trigger keydown events but not keypress events. Other differences between the two events may arise depending on platform and browser.
So in this case you are using the wrong event. Also it might have browser compatibility issues.
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.
I'm using Prototype and doing Event.observe on window.document.
I'm catching enter (keyCode 13) and alt+f (altKey && keyCode=70).
My code is working super with firefox, IE and chrome. With Opera no. Enter is catched, but only if my focus is not in any text input. Alt+F is not working at all.
Is it bug in Prototype or I need to do something 'extra' on Opera in order to go on? As i said, in all other browser my code works....
Firstly, the following is a helpful resource: http://unixpapa.com/js/key.html
Secondly, you should know there is a difference between keydown (or keyup) and keypress. keypress does not typically allow modifier keys, though it does allow some in Opera like control. Better to use keydown for cross-browser consistency.
I get keyCode === 13 in Opera 11.10 no matter whether the textbox is entered or not, and no matter whether using Prototype like this:
Event.observe(document, 'keydown', function (e) {
alert(e.charCode+'::'+e.keyCode);
});
or using the native method directly (using attachEvent for IE):
if (document.addEventListener) {
document.addEventListener('keydown', function (e) {
alert(e.charCode+'::'+e.keyCode);
}, false);
}
else { // IE
document.attachEvent('onkeypress', function (e) {
alert(e.charCode+'::'+e.keyCode);
});
}
However, alt is indeed not detected inside a textbox unless combined with a control or function key (though that doesn't work in Chrome or IE). This may be because Windows uses alt to give access to the applications menu bar.
You could try using control key and using preventDefault() (to avoid default behaviors like ctrl-f doing a page find) though this might annoy your users who might not want their browser behaviors disabled for your page.
Alt-F activates the menu and Opera doesn't let JavaScript handle this key press.
Is there a way to prevent the default action from occurring when the user presses backspace in a browser?
I don't need to prevent the user from leaving, just from having the default backspace action. I need the backspace to do something different (it's a game).
I tried without success:
window.addEventListener('keydown', function(e) {
if (e.keyCode === Game.Key.BACK_SPACE)
{
e.preventDefault();
e.stopPropagation();
return false;
}
}, false);
If I put an alert inside the if, the alert will be shown for backspace key press. So, the keyCode is correct.
This has to work in Opera 10.6, Firefox 4, Chrome 6, Internet Explorer 9 and Safari 5.
You don't need return false or e.stopPropagation(); neither will make any difference in a listener attached with addEventListener. Your code won't work in Opera, which only allows you to suppress the default browser behaviour in the keypress event, or IE <= 8, which doesn't support addEventListener. The following should work in all browsers, so long as you don't already have keydown and keypress event handlers on the document.
EDIT: It also now filters out events that originated from an <input> or <textarea> element:
function suppressBackspace(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (evt.keyCode == 8 && !/input|textarea/i.test(target.nodeName)) {
return false;
}
}
document.onkeydown = suppressBackspace;
document.onkeypress = suppressBackspace;
If you prefer to simply have the fix for yourself, without affecting other users when scripting into the web page, read below.
Here's some solutions that only change the browser you are using:
- Firefox on Linux "unmapped" the backspace behavior since 2006 so it's not affected; (at any rate, it was simply set to scroll up before then)
- Chrome has just announced that it will do the same from now on; (http://forums.theregister.co.uk/forum/1/2016/05/20/chrome_deletes_backspace/)
- Firefox on Windows can be set to ignore backspace by going into about:config and changing the backspace_action setting to 2; (http://kb.mozillazine.org/Browser.backspace_action)
- Safari ?!
I found at Telerik's page script ready to use. Script blocks back button action: by clicking in browser back button and backspace on page. This script works. I'm using it in my project.
http://www.telerik.com/community/code-library/aspnet-ajax/general/disable-backspace-from-master-page.aspx