How to add Keyboard Shortcut functionality to a HTML button - javascript

Well I was wondering how can I add Keyboard Shortcuts functionality to a HTML button. For example if you wish to bookmark a webpage you have keyboard shortcuts as CTRL+ D for chrome and safari but I wish to put the same functionality in a button so that when user clicks on it ,it bookmarks the page instead of showing an alert message to use CTRL + D like in this code.
so can this be done? I have no idea if it's possible, Even popular Addthis buttons display the same alert thing to use ctrl+d like on this site.

In HTML, the accesskey attribute allows to define a single letter, and leave handling the modifier keys to the browser and the operating system, to avoid conflicts.
<button aria-label="+ add this" accesskey="a"><span aria-hidden="true">+</span></button>
This is great in theory, but in practice there are some accessibility concerns. The ARIA standard also has a lengthy section on considerations for keyboard shortcuts.
I still would go with this, as it’s the best option we currently have. You wouldn’t want to handle platform conventions in your code.
You can even retrieve the key combination the browser finally assigned by using the accessKeyLabel attribute, but browser support is not great.
button.title += ` [${button.accessKeyLabel || button.accessKey}]`;
If you are using single character shortcuts, you need to provide a mechanism to change these shortcuts, should they interfere with other AT shortcuts:
Understanding Success Criterion 2.1.4: Character Key Shortcuts

Related

Alt-s Javascript event handler in Firefox: How?

I have a webapp which will be viewed using certain popular browsers and I am required to support the handling of certain keypress events. Our users will be using Windows and the keypress events always use the Alt key as a modifier.
There is no specific requirement for keyUp/keyDown event handling, the user just has to feel like something happens when he/she presses, for example, Alt-F.
How do we accomplish this in the Firefox browser, which we are required to support?
The problem:
All of our implementation attempts are interfered-with by the fact that when the FireFox menu bar is visible (File, Edit...), pressing an Alt key combination which is already claimed by the menu bar (example: Alt-f) will cause the appropriate menu to expand. We don't want this to happen. I have been shown examples of web apps (using tens of thousands of lines of javascript....) that do NOT experience this issue, so I know it is possible, but I don't know how this was done in the example I've seen with my own eyes.
I can find dozens of examples on the web of how to write an alt-key handler in JS, but I haven't found a single article on this issue or a single code example that works under the circumstances I've described. We are using Spring-MVC and a recent version of jQuery, if that matters.
I'm happy to update the question with any other information that proves relevant.
Side note about work-around suggestions:
The requestor has specifically demanded that I use the Alt key as the modifier, on the grounds that they use other webapps in FireFox where both the menu-bar is visible AND alt key combinations work. (Example: Alt-s). So, feel free to post well-intentioned work-arounds in the comment section if you wish - I promise that my own personal curiosity will drive me to read them all - but also keep in mind this is not the subject of my question.
Be aware that some browsers will not allow you to capture certain shortcuts! A working example in native Javascript for the Alt+s shortcut in Mozilla Firefox (version: 51.0.1, Linux):
window.onkeydown = function(e){
if(e.altKey && e.keyCode == 83){
e.preventDefault();
alert("Shotcut Pressed")
}
}
Hotkeys have been done well by various projects, such as jquery.hotkeys. You can see a working example on their demo page for most hotkeys. It's very small, only about 200 lines.
Here is a small example with the Alt+S hotkey that works for me (without triggering the history menu) in Firefox 40.0.2 (when the page is in focus of course, not the codepen editor).
$(document).bind('keydown', 'Alt+s', function() {
$('body').append('Alt+s was pressed; ');
// alert('alert will cause the menu to activate, do not use');
return false;
});

I need a way around using they soft keyboard for mobile browsers

Scenario:
I have an web app where I need to capture all keyed input to the page in a central location. My first solution was to continually give focus to a text box so all focus would go through there. That works amazingly for desktop browsers, but causes the undesirable effect of causing the soft keyboard on mobile browsers to always be visible. Since my keyed input is coming from an external source, I don't want the keyboard visible until I request it. Since there's no direct way (that I've found) to do this, I was trying to give constant focus to a control that doesn't cause the keyboard to show. I was unable to find a control that didn't cause the keyboard to show, but would fire one of the key events (keydown/keyup/keypress).
Does anyone have a suggestion as to how I can catch all keyed input without displaying the soft keyboard?
Note: I can have a different solution for desktop and mobile if necessary.
Any help is appreciated!
Ok, so the answer was so simple, I can't believe it took me so long to get to it.
If you make a textbox readonly, it doesn't show the keyboard, but still fires key events. This allowed me to accept input from the external source without showing the keyboard. I also added a keyboard toggle button that simply hid the readonly textbox and showed the regular one.
If my application would have been different, I could have just added and removed the readonly attribute and applied focus again to have the same effect.
Thanks for all replies, including the ones that got deleted.
var keyedinput = "";
window.addEventListener('keydown', function(event){keyedinput += String.fromCharCode(event.keyCode)}, false);
keyedinput will contain the contents of the keyed input from the external keyboard-like device. Simply reference it as a global variable when needed. If there is an enter/esc key or and "end" key (sequence?) you can just check the corresponding keyCode to launch an action with the contents of the variable instead of appending to it.

Javascript to simulate typing in contenteditable

I have a contenteditable div that I'd like to see the contents after a user types. This differs across different browsers for certain keys (like newlines and backspace).
For testing, I'd like to simulate this typing with javascript. Is there any way to do this?
I need more than just triggering events (which the majority of the questions on SO on javascript key triggering are about); I need the browser to see the 'enter' key was hit and do its thing to modify the contenteditable div. I'm interested in what the browser ultimately does so just listening for certain keystrokes and modifying the HTML myself would thus defeat the purpose.
This answer won't give you a way to do it via JavaScript, but I would recommend the browser automation testing tool, Selenium for this kind of testing. It will allow you to test the div as a user would interact with it.

LightSwitch Controls Keypress events

I want a way to capture the keypress events on my controls and if it's an Enter, set focus to the next control.
We had to do this once in a simple ASP.NET application to allow users to navigate through the controls by pressing enter on a Web Environment. We used a simple JavaScript back then.
Is there a way to accomplish this? If it envolves creating custom controls, are the LightSwitch control's classes available so I can inherit them all or something like that?
If you need to do it for a large number of controls, you'd be better of creating a custom control (preferably a control extension - binding is automatic), but you're going to need to create several different controls I'd imagine, not just a TextBox.
Of course it's up to you, but you might find it easier to just explain to/teach your end-users that "Tab" goes to the next control, "Enter" does not. This is the way that most Windows applications work, so you'd be going with the flow, instead of against it. There's a reason it's called "tab order".
Sorry, I know it's probably not what you wanted to hear, and you're not the first to ask for a way to do this, but as I said, you'd be going against the way that most, if not all, modern Windows software works, and it's not simple thing to do.

Best way to capture all key events for a web application?

I'm a little distraught at the current state of key capturing for web applications. It works great as long as you know your user is going to be typing in a specific place (e.g. an input field), but as soon as you want to do global shortcuts for an entire "application", it seems to fall apart.
I'm trying to find out if there is a better way to capture all the key events for a web page than the method I am currently using.
My current method is to use the JQuery Hotkeys plugin, bound to the document element, i.e.:
$(document).bind("keyup", "delete", function() {});
That works great for most purposes, but for example on Firefox, if the user happens to absentmindedly move their mouse over the navigation bar, the delete key will sometimes result in the user going "back", and the key is never received by the handler so that I can stop propagation.
Is there a different element I should be binding to? Is there a better plugin out there for this? Should I just avoid using any keys that are bound to things in common web browsers?
As more and more web applications look to mimic their desktop counterparts, it seems like this is a basic feature that web developers will increasingly require.
EDIT: I should point out that I am already using e.stopPropagation() and e.preventDefault(). The main problem seems to be that sometimes the event is never even passed to the bound function. I am basically wondering if anyone has figured out a "higher" element to bind to other than document. Or is there an alternative I have never even thought of? Embedding an invisible Flash element on the page and then passing all keys from that to JavaScript, for example (I don't think this would work).
I think, at this point, I am doing things the "standard, well-known way." I am trying to see if there is an outside-the-box way that isn't widely known that maybe someone on Stack Overflow knows about :-).
If you are making a sophisticated web-app with customized keyboard controls, the first thing you should do is alert the user that you are making a sophisticated web-app with customized keyboard controls. After that, tell them what the controls are and what they do.
Binding the keypress and keydown listeners to the document is the correct way to do it, but you have to remember to preventDefault and/or stopPropogation for keypresses that you want to override. Even if there is no default behavior, you will need to prevent them from cascading in case the user has rebound their default keyboard shortcuts.
Also, you will only be able to receive keyboard input when the page has focus.
When you say Delete I assume you mean the Backspace key as Delete generally referrs to the key next to Insert, Home, End, Page Up and Page Down.
Edit to add:
Be very careful about which keys you choose to override. If you're making an app to be used by people other than yourself, you have to worry about usability and accessibility. Overriding the Tab, Space and Enter keys is risky, especially for people using screen-readers. Make sure to test the site blind and fix any issues that may arise with traversing the page via the keyboard.
maybe you can use html-attribute ACCESSKEY and react onfocus.
i.e.:
<input type="text" size="40" value="somefield" accesskey="F">
i think u might need to add a tabindex to tags like <div>
<div id="foo" tabindex="1" accesskey="F">
You can't bind to events that happen where you have no control - e.g. the window chrome. The way most webapps deal with this is asking the user to confirm their decision to leave the page, using the onbeforeunload event:
window.onbeforeunload = function (e) {
var str = 'Are you sure you want to leave this page?';
e = e || window.event;
if (userHasSomeUnsavedWork) {
e.returnValue = str;
return str;
}
}
onbeforeunload - MDC
Absolutly non-tested but... try it on 'window' element.

Categories

Resources