I have a canvas element which I would like to make interactive by allowing users to enter text and remove it. Adding text works as expected, however deletion using the backspace key triggers the browser's back action.
How can I stop this action?
Cheers,
A.
Use the keydown event. Add the handler either to the document (bad, because it disables expected browser behaviour on the rest of the page, not just the <canvas> element) or give your <canvas> element a tabindex and add the keypress handler to it (better).
function preventBackspaceHandler(evt) {
evt = evt || window.event;
if (evt.keyCode == 8) {
return false;
}
}
document.onkeydown = preventBackspaceHandler;
Related
I wondered if I could have an input field, that, if someone (who is typing in the input field) presses the TAB key, not switches focus (so it must stay focused on the first input field and not go to the next).
Also, it must detect when someone presses the TAB key, and execute a function when the TAB key is released.
The code has to be in pure javascript.
Is this possible? If so, how?
You can use onkeydown to declare a function on the document to capture all key presses (or just use the specific element). Use this to check for tab and execute your function accordingly.
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 9) {
evt.preventDefault();
alert("Tab");
}
};
Use preventDefault() to prevent the default action for the key pressed.
I need to trap some data in my webpage then user make a mousedown event or simulate it when user press TAB key on a page element.
For mousedown i use standard code like:
$('*').on('mousedown', function (e) {
// make sure the event isn't bubbling
if (e.target != this) {
return;
}
//...my code
});
and all work done, for TAB key pressure i use this code for simulate mousedown event
$(':input').keydown(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
$(this).trigger('mousedown');
}
});
and all seems to be done, but then i look at the e data with
console.dir(e)
there are many difference and in second case many missed data:
SAME ELEMENT CLICK AND TAB EVENTS
CLICK
mousedown event:
TAB
and with $(this).trigger('mousedown');
There are far fewer data!! For example i need e.pageX and e.pageY parameters but if i trigger event there aren't.
How can i have the same e data on both case??
Thanks in advance
In your first print, you could see the "OriginalEvent: MouseEvent" which is the one that provides the pageX/pageY...when you simulate "mousedown" you don't have the original event. Depending on which event type triggered the handler you can't access the original event. Maybe this is the case.
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.
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
Basically, I want to make clicking anywhere on a page except in an input field and on one block level element (an by extension all children there in) erase said input field. So I put an onclick event on the whole document. To keep the conditions above I put conditions before the clear instructions to only do it if the event did not arise from specific elements.
clearSearch = function (e){
e ? e : e = window.event;
e.target ? target = e.target : target = e.srcElement;
if (target.nodeName != "INPUT" && document.getElementById('ul'))
document.getElementById('input').value = "";
}
With this method if I want to keep clicking on the ul from causing the action I have to explicitly state it in this if statement. Then I have to do the same for the li elements under the ul. Then any other children I create.
Basically this seems really inefficient and I was wondering if someone could help me out in thinking up a better solution to this mess I have created for myself.
You can remove the complex logic from clearSearch and just have it clear the search box. Then add some new onClick handlers to the elements you don't want to call this method. In those handlers set event.cancelBubble to true to prevent the clearSearch function being called.
From quirksmode:
For a complete cross-browser experience do:
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}