How to call a JavaScript function using keyboard shortcut? - javascript

There is a website which consists of main frame and some additional ones (they're responsible for parsing inserted data). When I start to edit a record, new frame appears. In the source code I see some JavaScript scripts added. Some of them come from site directories, but also there are some defined in the <head> section of the frame. And there is a function defined, let's call it parseData(input){...}, which is then called upon pressing "Save" link.
Is there any way to assign a keyboard shortcut to execute saving? There are no ids defined for the "Save" link, only href and class.
I tried bookmarklets*, but was stuck on joining the frame URL and the JS function call. Any other ideas?
Edit: * bookmarklets are meant to be launched using Shortcut Manager-like web browser extension.
Edit2: I'm not developing the website. I have read-only access to it.

If you want to use pure javascript to bind, say, "enter" to the function parseData, you could use:
document.onkeydown = function(e){
e = e || window.event;
keycode = e.which || e.keyCode;
if(keycode == 13){ // '13' is the keycode for "enter"
e.preventDefault();
parseData(input);
}
}

You might want to use jQuery with this plugin to create keyboard shortcuts.
Have a look at this:
https://github.com/jeresig/jquery.hotkeys
You may do something like this:
$(document).on('keydown', null, 'ctrl+s', saveFunction);

Related

Unpreventable keyboard shortcuts in javascript

as the title suggests, I was wondering - what keyboard shortcuts cannot be prevented with javascript in modern browsers? Is this browser-dependent or even system-dependent?
So far, I've got Ctrl+N,Ctrl+Shift+N,Ctrl+T,Ctrl+Shift+T,Ctrl+W,Ctrl+Shift+W, all from Google Chrome. Then there's the standard windows shortcuts with the windows key like the windows key itself, winkey+R, winkey+S, etc., but also Ctrl+Shift+Escape. Is there any way to know what keyboard shortcuts will lead to something javascript can't prevent?
I suppose my question boils down to: if event is a keyboard event, then what does event.preventDefault(); actually prevent?
EDIT
Let's make a list here:
Ctrl+N
Ctrl+Shift+N
Ctrl+T
Ctrl+Shift+N
Ctrl+W
Ctrl+Shift+W
winkey + anything?
Ctrl+Shift+Escape
Ctrl+Alt-Delete (added by Psi)
Alt+F4
Escape and F11 (for fullscreen) (added by zer00ne)
You need to use capturing phase of events to handle and prevent it from default behaviour.
BUT! You cant override CTRL+R, CTRL+W or CMD events in safari.
Better way to prevent user for refreshing page is
window.onbeforeunload = function(event) {}
For example
function preventFn(event) {
if (event.keyCode === YOU_KEY_CODE && event.metaKey) {
event.preventDefault();
event.stopPropagation();
}
}
document.addEventListener('keydown', preventFn, true); // true means use capture phase of event
for example you can use high level library for shortcuts management
hotkeys - powerfull
stack-shortcuts - small and easy
p.s. instead of event.metaKey use what do you need. docs here

Simulating keyboard press in a way that isn't deprecated?

I am looking for a way to simulate a keyboard press (like the titled suggests). I have looked around and I have found mainly these 2 SO questions:
Is it possible to simulate key press events programmatically?
Simulate keypress without jquery
The issue with those are that they both use the KeyboardEvent.initKeyboardEvent() event which according to MDN it is deprecated. Is there a different way of accomplishing the same thing without that deprecated function?
I would like to know this because I am creating a script for YouTube using Chrome's TamperMonkey extension. This script will, when [space] is pressed, trigger K. K is YouTube's toggle play/pause button. I have the [space] listener working perfectly with the code below:
document.addEventListener("keydown", function(e) {
if(e.keyCode==32) {
e.preventDefault();
}
}, false);
Also I am really looking for a pure JavaScript approach.
If you do this with jQuery you build your event.
https://stackoverflow.com/a/3368599/3257830
If you want to create an event, you initialize the object then dispatch the event.
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
document.addEventListener("keypress", function(e) {
alert(e.which);
});
var e = new Event("keypress");
e.which = 65;
e.keyCode = 65;
document.dispatchEvent(e);
<p id="r">Alerts on event</p>

Jquery, trigger click or enter [duplicate]

This question already has an answer here:
Can't trigger click with jQuery in a Chrome extension
(1 answer)
Closed 7 years ago.
I'm trying to submit a field with jquery, normally in the page you would click on a submit button or press enter in the field.
I'm doing this in a chrome script.
Now if I type:
$('#myButton').click()
In the Console, this actually works fine, but when i call the same code from my script function, it doesn't work.
I tried also to use this:
var e = jQuery.Event("keydown");
e.which = 50;
e.keyCode = 50;
$("#myButotn").trigger(e);
but still no results.
To be specific, the button that i'm willing to click has an onClick="submitFunction()"
Here is a much better way to trigger a click on keypress.
$(window).keydown(function (e) {
if ( e.which === 50 ) {
$("#myButton").click();
}
});
Demo: http://jsfiddle.net/bc7r3vq1/1/
By the way, keycode 50 is the number 2
Now, i've found a solution, but i'm not sure which one was the problem.
First of all I started using tampermonkeys, from there i used
$('#textField').submit();
and it worked fine.
I'm going to check now if I had to use this method, or if it was just something related with my extension.
EDIT: It works only if I use tampermonkeys, as they saied..
I believe your issue comes from the browser policy preventing your code from faking a user action. Chrome only allows you to fake a user action if its called directly from another user action handler like an actual user click of keydown. Try your code from within a click handler and if it works its because of this policy block.

How to trigger click on keypress with jquery

I need to trigger click on some keypress action, also if it's a up or down key on my keybord script will be removing some class from specify element. So keypress is working but trigger and up down press not, this is my code, ths for help.
$('.main_search_field').keypress(function(evt){
$('.live_search_plugin').addClass('visible');
var scroll_pane = $('.scroll-pane');
scroll_pane.click();
scroll_pane.trigger('click');
if (evt.keyCode == 40) {
$('.live_search_list ul li').removeClass('active');
}
});
You can try following code:
var e = jQuery.Event("keypress");
e.which = 50;
$(".main_search_field").trigger(e);
In e.which put code for required character.
You have to check for the evt keypress like so:
if (evt.which == 40) { }
When using keypress, usually I check for which key I want to interact with before running any code inside my function. If you don't do this, your code will run with any keypress.
.keypress() might not be your best solution here, you could be better off using keydown() and keyup(), or to use the full version: .bind('keydown', handler) (ditto for keyup)
From the jquery docs:
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.
http://api.jquery.com/keypress/
.click() is shorthand for .trigger("click") and you are using it fine, but do you actually have a click handler on $('.scroll-pane)?
Your code will (assuming browser dependencies) cause two clicks to be triggerred on $('.scroll-pane') and then the if() to be evaluated. But you haven't shown us your click handler for scroll-pane so we can't see if that's at fault.

toggle buttons using tab

It is simple. I have two buttons in a web page. They are sitting closely.
Currently I use mouse to click one of them then doing something.
Can we just use keyboard such as TAB?
Thanks.
Using tab to press buttons will completely break accessiblity on you websites and will effectively drive away any keyboard users from your website, it's an awful practice.
In any case, you might want to capture events for '*' using jquery:
$('*').keydown(function(event) {
if (event.keyCode == 9)
//stuff
})
Though I'd strongly recomend agaist doing this; never override what keys such as tab do, you'll create huge accessiblity issues.
[EDIT]:
Adding the event to document might be more efficient:
If key presses anywhere need to be caught (for example, to implement
global shortcut keys on a page), it is useful to attach this behavior
to the document object. Because of event bubbling, all key presses
will make their way up the DOM to the document object unless
explicitly stopped.
Source
jQuery would be perfect for this just bind the key to that button. something like this.
$('your selector here').keyup(function(e){
if(e.which == '9'){
//do your stuff here
}
});
I think 9 is the correct charcode for tab but you might need to check that. and make sure you do this inside of $(document).ready();
Yes, hit Tab until the button has a dotted border to indicate focus, then you can hit Enter or Space to click the button.
E.g. Button 2 has the focus here and pressing Space or Enter would "click" it:

Categories

Resources