Hotkey to Button - javascript

Is there any way to make a keyboard shortcut that will click on a button on a webpage.
Like I would like to have a hotkey : Ctrl+S to automatically click on Search on Google.
I've tried this : Shortcut Manager plugin but I'm not sure how to assign it.

This might help:
See this jsFiddle
$(window).keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
var rr = $('#report').html();
$('#report').html(rr + '<br />' + keycode);
if (e.ctrlKey) alert('Control pressed');
//if (!(keycode == 115 && e.ctrlKey) && !(keycode == 19)) return true;
if (!(keycode == 83 && e.ctrlKey) && !(keycode == 17)) return true;
alert("Ctrl-S pressed");
$('#gsearch').trigger('click'); //or just .click() also works
e.preventDefault();
return false;
});
Note that webkit browsers will not trap ctrl, alt, shift, etc keys. See this article for info

Related

Detecting Ctrl - F11 with javascript

I googled the answer in couple ways but couldn't find a good answer without any library. It was also not asked in stackoverflow. So I thought it might also be helpful to someone else as well. I know I can detect window keyup or down event but how can I detect Ctrl + F11 event in the same time?
$(window).keypress(function (e) {
var keyCode = e.which;
if (keyCode == 122) {
console.log("You pressed f11");
}
})
Thank you.
Using Javascript:
document.onkeydown = keydown;
function keydown(e) {
var evtobj = window.event ? event : e
if (evtobj.keyCode == 122 && evtobj.ctrlKey)
alert("[JS] Ctrl + F11 pressed");
}
<p>Press Ctrl + F11</p>
More Info:
KeyboardEvent.ctrlKey
Keycodes Info
Using jQuery:
$(document).keydown(function(e) {
if (e.which == 122 && e.ctrlKey)
alert("[jQuery] Ctrl + F11 pressed");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Press Ctrl + F11</p>
More Info:
Event Object

Ctrl+u double make not hide

The below code works fine, but if I click double Ctrl+u then it opens all. How can I disable all?
Ctrl+u, Ctrl+s, right-click, F12 key and more key for hide code?
document.onkeydown = function(e) {
if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) { //Alt+c, Alt+v will also be disabled sadly.
alert('not allowed');
}
return false;
};
you have to put e.stopImmediatePropagation();
/*function check(e)
{
alert(e.keyCode);
}*/
document.onkeydown = function(e) {
if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117)) { //Alt+c, Alt+v will also be disabled sadly.
alert('not allowed');
e.stopImmediatePropagation();
}
return false;
};
Try to use the e.preventDefault() function. it will stop the browser to do the default actions when in this case a key combination has been pressed.
The key code for the F12 button is 123. To detect the 'contextmenu' event (user clicks right button), you also have to use the preventdefault function to avoid opening the contextmenu. Maybe this will help you:
Live preview: https://jsfiddle.net/cmLf34h3/1/
document.onkeydown = function(e) {
if (e.ctrlKey && (e.keyCode === 67 || e.keyCode === 86 || e.keyCode === 85 || e.keyCode === 117) || e.keyCode === 123) { //Alt+c, Alt+v will also be disabled sadly.
alert('not allowed');
e.preventDefault();
}
return false;
};
window.oncontextmenu = function (e)
{
alert("You have tested if your right-mousebutton is still working. This alert confirms it's still working, have a nice day!")
e.preventDefault();
return false; // cancel default menu
}
Source for the right-click function: Is right click a Javascript event?
Note: You cannot 100% prevent these actions, there is always a backdoor to bypass this.
I hope this helps

How to detect backspace key?

How can I also choose if e.which == 'backspace' ? at the moment, this function helps with showing a loader when info from a database is being retrieved, though i want the loader to show when the backspace is pressed.
field.focus().keypress(function(e) {
e.which !== 0 ? loader.show() : loader.hide();
});
field.focus().keyup(
function(e){
if(e.keyCode === 8)
alert('backspace trapped')
}
)

Overriding shortcut keys in Firefox and Chrome

I have a script that is supposed to open a section of a web page, and save changes on Ctrl + n and Ctrl + s respectively. I got it working in IE, but it doesn't seem to work in Firefox and Chrome. Any ideas?
My override function.
function prevent(e)
{
try{e.stopPropagation();}catch(ex){}
try{e.preventDefault()}catch(ex){}
try{if (e.preventDefault)
e.preventDefault();
else {
e.cancelBubble = true;
e.returnValue = false;
e.keyCode = 0;
}} catch(ex){}
}
I have seen the same issue. Some browsers will not allow you to capture certain shortcuts. Look at this https://stackoverflow.com/a/7296303/1366887
Some key combinations are resticted in Chrome 4, but not in Chrome 3. Look here: https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/Ntc1byZXHfU
Here is the Javascript:
$(window).keydown(function(event) {
if(event.ctrlKey && event.keyCode == 84) {
console.log("Hey! Ctrl+T event captured!");
event.preventDefault();
}
if(event.ctrlKey && event.keyCode == 83) {
console.log("Hey! Ctrl+S event captured!");
event.preventDefault();
}
});
I have used this numerous times, and it has worked greatly.
Here is another rescource you can take a look at: http://unixpapa.com/js/key.html
Without Jquery:
onkeydown = function(e){
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
e.preventDefault();
//your saving code
}
}
Here is a JSFIDDLE of it working.
For anyone looking for this in the future, the answer for current browsers is the following:
if (event.ctrlKey && event.key === 'k') event.preventDefault()

jQuery keyboard activate a button

this is what I got so far
http://jsfiddle.net/qEKfg/
It's two buttons that activate on click and look like keyboard keys.
I'm trying to make it where they will only activate (animate) on a keyboard press of the related keys (CTRL and D)
This will make an 'animated buttons' effect for bookmarking my website, because CTRL+D is the hotkey to bookmark a page.
But I don't know how to set it up to work with keyboard keys in html or jQuery
if some could help I would be really REALLY grateful
The following should work for you. However, note that due to the window losing focus, I've added in a timer to release the on-screen 'buttons' after 5 seconds, as the window losing focus at that specific time prevents the keyup event from firing.
$(document).ready(function() {
var keys = [];
$(window).on('keydown keyup', function(e) {
if (e.type == "keydown") {
if (e.keyCode == 17 || e.keyCode == 91) {
$("a.a_demo_two:contains('CTRL')").addClass("active");
keys[0] = e.keyCode;
}
else if (e.keyCode == 68) {
$("a.a_demo_two:contains('D')").addClass("active");
keys[1] = 68;
};
if ((keys[0] == 17 || e.keyCode == 91) && keys[1] == 68) {
setTimeout(function() {
$('a.a_demo_two').removeClass("active");
}, 5000);
}
}
else {
if (e.keyCode == 17 || e.keyCode == 91) {
$("a.a_demo_two:contains('CTRL')").removeClass("active");
}
else if (e.keyCode == 68) {
$("a.a_demo_two:contains('D')").removeClass("active");
}
keys = [];
}
});
});​
DEMO
Basically you just put handler on keydown and keyup events and trigger whatever you want.
Something like that
$('body').on('keydown', function(e) {
console.log(e)
if (e.ctrlKey) $('.a_demo_two').trigger('mousedown')
if (e.keyCode === 100) $('.a_demo_two').trigger('mousedown')
});
$('body').on('keyup', function(e) {
console.log(e)
if (e.ctrlKey) $('.a_demo_two').trigger('mouseup')
if (e.keyCode === 100) $('.a_demo_two').trigger('mouseup')
});
​

Categories

Resources