How to initiate a keyboard key click event in JavaScript? - javascript

Here I'm trying to override the default shortcuts of IE browser. I'm using IE8 for my application.
Let me give an example. I want to override a shortcut ALT+P. The default function of ALT+P in IE is "Open the Page menu". I tried doing the following way, but I'm not able to override it:
<script type="text/javascript">
document.onkeydown = printKeycode;
var isAlt = false;
function printKeycode(e)
{
//alert('11')
var keycodeentered = window.event.keyCode;
if(keycodeentered == 18)
{
isAlt=true;
}
if(keycodeentered == 80 && isAlt == true) // P keycode is 80
{
alert('Combination entered');
window.event.returnValue = false;
}
}
</script>
But I'm not able to override the default functionality. My action is being triggered at the same time the default action is happening. Small observation is, I am able to prevent the default action of shortcuts using CTRL combination. Any clue?

Have a look at this here:
Overriding Browser's Keyboard Shortcuts
or
Disable Internet Explorer shortcut keys
or
How can I disable Alt-Enter in IE?

Related

How to override default alt-key + click action? Browser makes a download, but

By pressing the alt-key and click on a url, chrome makes a download. This because of the browsers default alt+click action. How can I prevent that? It should exchange the url.
The code works with other keys (for example x == 88), where the browser has no default actions. But how with the alt-key?
//ALT-key recognition
document.onkeydown=function(){
var keyCode = event.keyCode;
if(keyCode == 18) //alt-key
{
console.log(keyCode);
document.getElementById("hist").setAttribute ('href', "history_by-date.php?wdate=all");
}
}
<div id="history">
should be just a link - not a download (when alt is pressed)
</div><!-- end history -->
Another user here skyline3000 has an interesting article with prevent code, but I bring it not to work. Thanks for any help.
evt.preventDefault();
evt.stopPropagation();
return false;
Rather than listening to a keypress I think you need to listen to the link click events and check the event.altKey property. I'm not 100% if this is bulletproof vs alt-click download, but it seems to work. Note, using this.click() to invoke the link will only work if it's a normal href, no javascript or click events. There are other more complex ways to do that part otherwise.
document.querySelectorAll('a').forEach(a => {
a.addEventListener('click', function (e) {
if (e.altKey) {
e.preventDefault(); // no download
this.href = 'history_by-date.php?watchdate=all';
this.click(); // fake a normal click
}
});
});
<a href='http://example.com'>alt-click me</a>
What you are asking is to change the users' browser's default actions. This is not possible. A default action from the browser wont run in the HTML DOM, thus not being detectable.

want to disable whole keyboard using javascript start key not disabled not even ctrl+d

i have tried to disable whole keyboard using javascript but windows start key is not disabled same way enter key is also not disabled using my script
<script type='text/javascript'>
document.onkeydown = function (e) {
e.preventDefault();
}
</script>
I think you cannot prevent windows key action because after pressing the window key browser doesn't detect it. The reason is that windows key doesn't affect the browser.
Try this:
document.onkeydown = function (e) {
return false;
}

Is it possible to use the keyboard to trigger a File Browser in JavaScript?

I have code that let my users open the File Browser of the client's browser so they can select a file.
That works fine when the user clicks a button with the mouse, but somehow it completely fails with the keyboard.
So I setup the button as follow:
var that = this,
upload_button = jQuery(".upload-button");
upload_button.click(function(e)
{
e.preventDefault();
e.stopPropagation();
// simulate a click on the hidden file-input button
that.upload(editor_widget);
});
I setup the keyboard as follow (the upload_button will get focus first, obviously):
upload_button.keypress(function(e)
{
if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey)
{
switch(e.which)
{
case 85: // [U]pload
case 13: // Enter
e.preventDefault();
e.stopPropagation();
// simulate a click on the hidden file-input Browse button
that.upload(editor_widget);
break;
}
}
});
Then the upload function looks like this:
....prototype.upload = function(editor_widget)
{
var upload_button = jQuery(".upload-button"),
upload_input_file = w.find(".file-input input");
// ignore clicks if the button does not exist
if(!upload_button.exists())
{
return;
}
// simulate a click on the file "Browse" button
//
upload_input_file.focus();
upload_input_file.click();
c.focus();
};
So, somehow the upload_input_file.click(); works fine when I click the button. It completely fails when I press U or <enter>...
I'm primarily testing in Firefox at the moment.
You can totally do this.
Register keyup event for document then trigger click to file browser button.
$(document).keyup(function (e) {
if (e.keyCode === 85) {
$(".upload-button").click();
}
});
Try substituting using .click() on DOM element for jQuery .click() on jQuery object
$(window).on("keydown", function(event) {
if (event.which === 13 || event.which === 85) {
event.preventDefault();
event.stopImmediatePropagation();
$("input")[0].click()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input type="file" />
As mentioned in the comments of the other two answers, I found something that will make the Enter (and eventually spacebar) work in Firefox, but not the U key.
The idea is to change the focus to the input of type file in keydown and thus let the normal Enter or Space keyup event do what it normally does.
upload_button.keydown(function(e)
{
if(!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey)
{
switch(e.which)
{
case 85: // [U]pload -- does not work in Firefox
case 13: // Enter
case 32: // Space
// we cannot simulate a click in this case, but we can
// change the focus and let the system manage the keyup
// event as normal... be sure to let the normal propagation
// of the event happen since that's where things
// actually happens. So all we do is:
upload_input_file.focus();
break;
}
}
});
I have not tested yet, I may have to manage the U key with the click() so it works as expected in other browsers.
Okay, I now also tested with IE and it works with the U key with the original code. The Space and Enter keys do not both work in IE so if you want to support both, that will require a test to know whether to handle those keys as in IE or as in Firefox...

Setup asp.net default enter press client side

Working with asp.net, and I am trying to find a way to change default ENTER key press target on client side. Based on something like the currently focused div or input.
The target would be asp.net button controls with postback event.
Looking for solution for both IE and Firefox.
I am also using WebForm_FireDefaultButton(event, controlId) trying to set the default button but it doesn't work for Firefox; work fine for IE though.
Look at the Default Button property of an ASP.NET Panel Control
It's too difficult to answer this question without knowing the context. Generally speaking you must prepare javascript with required actions and then add something like
onkeydown = "if (event.keyCode == 13) submitForm(); if (event.keyCode == 27) cancelLogin();"
on client side or something similar on server side to action producing controls. The above example refers to MVC. For WebForms you can use __doPostBack instead of my submitForm() function (link text). Usually I used such scenario with inputs (TextBox controls for WebForms).
here is the cause and solution i just found
Asp.Net Form DefaultButton Error in Firefox
basically, on whatever event you prefer, call the following "FireDefaultButton" function to set the default fire button. The out of box function "WebForm_FireDefaultButton" does not compatible with Firefox (see the link for detail)
function FireDefaultButton(event, target)
{
// srcElement is for IE
var element = event.target || event.srcElement;
if (13 == event.keyCode && !(element && "textarea" == element.tagName.toLowerCase()))
{
var defaultButton;
defaultButton = document.getElementById(target);
if (defaultButton && "undefined" != typeof defaultButton.click)
{
defaultButton.click();
event.cancelBubble = true;
if (event.stopPropagation)
event.stopPropagation();
return false;
}
}
return true;
}

Disable Internet Explorer shortcut keys

EDIT: After waited a while and didn't get anything yet, I've decided
to do shortcut disable thingy only for
IE now. Is there a possibility to disable
IE shortcut keys to access menus/print
etc. via vbscript?
Is it possible to disable browser shortkeys?
Because many of them are using in application. For instance, Ctrl+p is using and I don't want browser to popup the print window.
Yes, you can listen for the various key combinations with javascript and disable the default behaviors. There's even a library that you can use and test here. I just tested it using google chrome and firefox in their demo textarea, and it works as you want.
shortcut.add("Ctrl+P",function() {
return;
});
This works in the browsers that I listed above, but IE will not allow you to override the default behavior in some cases.
Your only option in IE is to disable the Ctrl key entirely with something like:
document.onkeydown = function () {
if (event.keyCode == 17) alert('Ctrl Key is disabled');
};
Which is not ideal and probably not what you want, but it will work.
You can try creating an event handler for keydown event, check on the keyCode and prevent its default action if needed. However this will not work in all browsers.
An example for Firefox (canceling "Print" short key, verified):
document.addEventListener("keydown", function(oEvent) {
if (oEvent.keyCode == 80 && oEvent.ctrlKey)
oEvent.preventDefault();
}, false)
There is a nice trick to fight with IE10+, to avoid display browser menus on alt key combinations, like Alt + F, Alt + H ...
I recently used on IE11, just add an anchor with the attribute accesskey:[yourKey] on your body
<body>
<script type="text/javascript">
window.onkeydown = function(e){
console.log(e.keyCode + " alt: " + e.altKey);
e.preventDefault();
};
window.onkeyup = function(e){
console.log(e.keyCode + " alt: " + e.altKey);
e.preventDefault();
};
</script>
</body>
Now when you press Alt + f the browser will not display "File popup" as usual, and will let events keydown and keyup gets to you, and not only keydown.
I am working on similar problem, hooking keyboard event Below code works well to disable, except the flash object on the IE has not got the focus. Since I am trying to handle keyboard event on the flash object, this code does not work for me.
function hookKeyboardEvents(e) {
// get key code
var key_code = (window.event) ? event.keyCode : e.which;
// case :if it is IE event
if (window.event)
{
if (!event.shiftKey && !event.ctrlKey) {
window.event.returnValue = null;
event.keyCode = 0;
}
}
// case: if it is firefox event
else
e.preventDefault();
}
window.document.onkeydown = hookKeyboardEvents;
From you application after calling the method on Ctrl+P just make the keycode as zero.I think that will solve your problem...
window.event.keyCode=0;
this will set the keycode as zero..So when explorer checks for the keyCode it will be zero...so default function will not execute...
Try this...just a suggestion
This works for me in IE 8. The important part is IE requires ev.returnValue to be set to false. NOTE: this only works if you have focus on some element on the document...that is, if you just load the page and hit 'ctrl-p' you'll see the print dialog. But if you click somewhere on the page, then try it, it should suppress the print dialog.
document.onkeydown = function (e) {
var ev = e||window.event;
// Do what I want keys to do ...
// Block browser short cuts
if(ev.preventDefault) // non-IE browsers
ev.preventDefault();
else // IE Only
ev.returnValue = false;
};

Categories