Hotkeys in webapps - javascript

When creating webapps, is there any guidelines on which keys you can use for your own hotkeys without overriding too many of the browsers default hotkeys.
For example I might want to have a custom copy command for copying entire sets of data that only makes sense for my program instead of just text. The logical combination for this would be Ctrl + C but that would destroy the default copy hotkey for normal text.
One solution I was thinking about is to only catch the hotkey when it "makes sense" but when you use some advanced custom selection it might be hard to differentiate if your data is focused, if text is selected or both.
Right now I am only using single keys as the hotkey, so just C for the example above and this seems to be what most other sites are doing too. The problem is that if you have text input this doesn't work so good. Is this the best solution?
To clarify I'm talking about advanced webapps that behave more like normal programs and not just some website presenting information(even though I think these guidlines would be valid for both cases). So for the copy example it might not be a big deal if you can't copy the text in the menu but when Ctrl + Tab, Alt + D or Ctrl + E doesn't work I would be really pissed, cough flash cough.

I think 85 Firefox Shortcuts for Mac and PC, Keyboard Shortcuts for the Opera Browser, Chrome's Keyboard and mouse shortcuts, Safari: Browser Window and Menu Shortcuts and Internet Explorer keyboard shortcuts may be helpful (other browser's hotkeys are similar). But always bear in mind that installed extensions can define their own hotkeys (e.g., I like Firebug's F12 a lot).

How about using Shift + ?.
I don't think it will override any important option (am I wrong?)

Related

Why is the onauxclick event triggered in a different way in google chrome browser?

So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?
While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick

How can I achieve bookmarklet functionality in Microsoft Edge browser (without installing anything extra)?

Microsoft Edge browser does not support javascript bookmarklet in favorites.
Is there an easy workaround for this?
When browser extensions for Edge come out, then it might be possible if the user installs an extension -- but that's much higher overhead for the user and developer.
I assume this is by design. But what is the microsoft workaround for this besides extensions?
description of problem:
http://answers.microsoft.com/en-us/windows/forum/apps_windows_10-msedge/please-support-drag-and-drop-bookmarklet-and/dc7d2f09-8742-46a5-bb4a-4d1f576b8919
and old workaround: http://www.howtogeek.com/231775/how-to-install-and-use-bookmarklets-in-microsoft-edge/
a hack using an installed program:
http://www.emmet-gray.com/Articles/EdgeManage.html
After experimenting around, I found out that in fact EDGE does support bookmarklets, but they call it Reading list. It works almost like bookmarklets, but a bit more poorly and difficult to debug, plus there is a (logical) limitation that cannot be circumvented as easily as in say Firefox: if your script comes from a http:// site, it cannot be run on a https:// site.
You can use bookmarklets in Edge this way:
Right-click your button with your javascript:.... url.
Click Add to reading list.
Navigate to your site and run the script on that site by clicking Reading list (Reading list on my version of Edge on PC is located behind the three horizontal lines called Hub and then the fancy icon with many curled horizontal lines called Reading list, on mobile the Reading list icon appears above the address bar when you click the ... menu icon) and from that list clicking your script.
I have tested it AND IT WORKS ON BOTH PC EDGE AS WELL AS MOBILE EDGE (Mobile: Windows 10.0.14393). Hope this helps someone as I almost abandoned my Lumia for an Android mainly because of my perceived lack of this feature.
With Windows 10 Fall Creators Update, Edge now supports editing URLs for favorites.
Reference : https://blogs.windows.com/msedgedev/2017/10/17/edgehtml-16-fall-creators-update/
Edit URLs for favorites
By popular demand, we’ve added the ability to edit the address for
individual favorites in the Favorites Hub or on the Favorites bar.
To do this, simply right-click or press and hold a favorite and select
“Edit URL.”
Points to Note:
The javascript code that's pasted in place of the URL should be in a single line. [i.e. remove all the new line breaks.]
The javascript code should not exceed 2083 characters.
Now that Edge supports editing a URL on the favorite bar - simply do the following.
Add a favorite (doesn't matter what)
Use "Inspect element" from the bookmarklet button context menu (right-click)
Use "Edit URL" from the favorite (create in step 1) context menu (right-click)
Paste the bookmarklet URL
(tested on 41.16281.1000.0)
I know this is kinda an old question, but...
Now that Microsoft Edge stores its favorites in a database, the "old workaround" is no longer viable.
But, there is a free 3rd-party application called EdgeManage that will allow you to edit/create the URL directly in the favorite.
So, this will allow you to use bookmarklets in Edge
PS: I am the author
I'd be happy to discover a better work-around, but the closest I have found for MS Edge version 92.0.902.78 is a feature known as "Snippets". The devtools guide describes Snippets as alternatives to bookmarklets.
To add a "Snippet":
Open the dev tools (F12 or Ctrl-Shift-I or navigate: ...->"More Tools"->"Developer Tools")
Find the "Snippets" pane in the "Sources" panel
Click the "New snippet" button
Add your javascript code in the editor area and save
To run a "Snippet":
Right-click on the snippet name in the Snippets list of the developer tools and select "Run"
Each snippet is associated with a uri-looking link (like snippet:///add-library-proxy), but these don't appear to be recognized in bookmarks nor from in the address bar.

Disable Alt functions (shortcuts) in Google Chrome

I use the following code (as shortcut) to redirect users on my feedback page.
<a href='/feedback/' accesskey='f'>feedback</a>
But this code does not work in Google Chrome because when user presses Alt + F it will open the Google Chrome menu bar.
How do I disable those 'shortcuts'?
It can be jQuery, javascript...
Note: I have written a javascript code that redirects, but it firstly opens the Chrome menu bar then does its job.
Browsers that allow this theoretically expose a security vulnerability. If it's possible to override "system" behaviors, you could hijack the users browser. It would be able to pop up a fake "File" menu that simulates the real one and makes the user think they are interacting with their own local machine instead of a web site.
Because of this it's impossible in most modern browsers.
There are certain special keys that are reserved and Alt+F is one of them but it will really vary between browsers and operating systems. Here's a good article.
In Google Chrome (tested in V44), the modifier key to access accesskey keyboard shortcuts is Alt.
However, if the key conflicts with a browser shortcut, it is accessed with AltShift. So the solution you posted works, but only using AltShift.
Example:
the first link is accessed with AltShift+f (conflict with menu shortcut)
the second link is accessed with Alt+a (no conflict)
<h1>Links with accesskey attribute</h1>
<a href='http://www.example.org/' accesskey='f'>
Link to www.example.org (accesskey: f)
</a>
<p/>
<a href='http://apache.org/' accesskey='a'>
Link to apache.org (accesskey: a)
</a>
Incidentally, I prefer the solution Firefox uses, which is to always use AltShift for these shortcuts. This is more consistent for users than Chrome's behavior (though the Chome devs may have had their reasons).
Note: The above is valid on Windows and Linux. AFAIK, Chrome on Mac OS X uses different shortcuts.
As others have stated, it's probably not a good idea.
But if you're a madlad and you like doing what you want, this will actually work:
document.addEventListener('keydown', (e) => {
e.preventDefault();
if (e.altKey) {
console.log('yay');
}
})
e.preventDefault() needs to be placed at the top of the event handler. This prevents the browser's default behavior (ie., opening menus).
I just found a way how to disable browser functions when user presses Alt + other button. Javascript can disable this shortcuts by writing at the end of the function return false
Example
function function1(){/* code goes here */; return false}

Disabling hotkeys in Desktop Safari

Before you start criticizing, I'd like you to know that I have a really reasonable reason to disable hotkeys :
I'm coding a small video game in Javascript, a guitar hero like that's played using an inverted keyboard. And it uses various keys on the key board (F1 to F5 by default, mac users can change it in the options panel) while other keys aren't disabled.
The problem resides in the F5 keys (and any other key if the user selected it). On Firefox and Google chrome, I could simple use event.preventDefault(); or window.event.returnValue = false;. But these two methods have no effect on Windows' Safari.
I'd like to know if there's any way to do it. I have an alternative but i'd rather use it as a last resort...
This is a known bug in WebKit.

How can I intercept the F5-button-clicked event using jQuery?

I want to implement keyboard shortcuts using jQuery.
Specifically, I want to fire an event when e.g. F5 is clicked.
What kind of issues do you run into with keyboard shortcuts?
Also, any online chart that has all the keyboard mappings to numbers?
You can't and shouldn't use F5 key - it's reserved by most browsers as refresh, and even you could you shouldn't want to confuse users by breaking UI conventions
You can use this little app to find out key codes
This little JS library will let you do it:
http://www.openjs.com/scripts/events/keyboard_shortcuts/
however there are some things to note.
1.) In IE, you can't AFAIK stop the event, you are just hooking in before it refreshes
2.) In IE, certain keyboard events you simply can't intercept... e.g. CTRL+S will always bring up the Save dialog, like it or not.

Categories

Resources