Disabling key functionality in browser - javascript

I am writing an application in JavaScript (with JQuery). The application has a lot of functionality that the user needs to access quickly and possibly at the same time (you could think of it as a game, even though it's not a game) so I've set it up to use the keyboard. I've got a prototype of the system working (in Chrome, at least), but there is a problem in that when I press, for example, Ctrl-T, it opens a new tab. I would like to use this as part of my application to, for example, toggle some setting. In general, I would like to disable the Ctrl-key functionality of the browser. This goes for Alt and Shift, too. In a different way, I would also like to disable the browser's usage of the Tab key. Basically, I want my application to have complete control over the keyboard while it's being used (if they want to navigate away, they will still be able to do so with the mouse). I will add the caveat that I don't care about some of the less-common keys (F1-F12, Windows/Mac-Command, Menu, anything right of the Enter key) because my application mainly targets laptops and many don't have those keys, so they won't be used.
My question is, how can I disable this browser functionality with JavaScript/JQuery/DOM?
I understand that taking over browser functionality in this way this sounds very authoritarian, but it's actually quite necessary. From the prototype and some target-audience test users (my family) everyone has agreed that this was a good idea.
I've also considered moving my application out of the browser and writing it in some application language (probably Java), but I want to find out if this kind of functionality is possible in JavaScript before making that kind of switch. This is prototyping time, though, so every idea is still up for consideration!

Basically, you return false at the right time. See this: How to create Ctrl+Key shortcuts in Javascript.
I should add and say sometimes this doesn't work - it's up to the browser to allow this.
Also, it is sometimes possible to change e.which to another key, but again, this wouldn't always work.

Related

Electron app that is screen overlay catching and passing user actions

so I want to create cross-platform app that will be invisible overlay over whole screen. When user interacts with whatever is under, I want to catch the event (mouse location, mouse click etc) so I can have info of what user attempted and where, and then "pass" the event through. Also, I might wanna display something in overlay as result of the event.
Coming from .NET, I understand how I would hook into mouse events. I also understand that it is possible to simulate user clicks with Mouse class in .NET Core. However I was wondering if this is possible with electron, as I was checking it for cross-platform solution.
I checked some topics (like this click-through discussion) that mostly deal with passing events through overlay, but I am not sure those do this catching-then-passing. So is there something like that and is it actually possible with only electron/nodeJS? Or would I have to use additional libs, and would they be different for Win/Linux/Mac?
I checked at:
Overlay Electron and
electron-overlay-window
but both seem complicated with attaching to game and following the window respectively. I was hoping it is possible and simple somehow.
IMHO, it's is possible, but will require a ton of OS-specific code and possibly some native modules.
I suggest to start with https://www.electronjs.org/docs/api/browser-window#wingetnativewindowhandle and https://www.electronjs.org/docs/api/browser-window#winsetignoremouseeventsignore-options

Adding WAI-ARIA attributes with JS

At work I have been optimizing one of the sites I have helped developed for one of our clients (I can't say who) for be ADA compliant using WAI-ARIA attributes. I've been wondering if it wouldn't just be easier to create a small JS library that does things like add "role=button" to anchors I've styled to look like a button, add "tabindex=0" to elements I want to be "tabable" etc.
I was wondering if it is a good practice to add in WAI-ARIA attributes with JS or is that frowned upon. Some accessibility evaluation tools won't run the page's JS when evaluating it so it will think these are pain points when they are really not.
this may be helpful Add ARIA inline or via script?
Also note that if you use role=button it needs to act like a button (i.e. provide appropriate keyboard interaction behaviour)
I think in the interests of progressive enhancement, it might be best to put all your ARIA inline and not rely on script to add it.
If there are other script errors, if the connection gets dropped, if there is a blocking script in the way, etc., then your library may not come into play and your efforts at remediation will be lost.
I'd also like to build on what Steve said above about using role=button on a link. Especially when you consider that a visual style (to make a link look like a button) is meaningless to a screen reader use (for whom many ARIA roles benefit). I addressed other keyboard interaction gotchas in more detail in another SO answer, but here is one to consider when you try to turn a link into a button:
A hyperlink (<a href>) can be fired by pressing the enter key. But a true <button> can be fired by pressing the enter key or the space bar. When a hyperlink has focus and the user presses the space bar, the page will scroll one screenful. Users of some assistive technology will expect behavior based on the element used.
Also, I caution against putting a tabindex=0 an an element you want to be tabbable unless it is an interactive element. For example, do not put it on a heading (<h#>) just so someone can tab to it as screen readers (for example) already allow navigation by headings.

chrome extension force mouse move

I am writing a chrome extension that records your actions like ( mouse click, keyboard keyup ). The idea of the extension is to help me and my colleagues to reduce the boring testing of our web based project. I made it to record the events and store it on the dev server as mysql so i can use or share to them. But the problem is replaying the saved actions.
So how if there is a way to force mouse move, mouse click events. Can it be done from flash,java or something like that.
PS. The project is Extjs but i want to make the extension useful for developer using other frameworks and publish it.
Consider using Selenium for this. It has support for many languages, and you can script your whole test with it. You can for example set it to click on an element, wait for something to happen or fill text boxes.
Imagine some random website controlling your mouse ... not cool, is it? (That's why you cant force mousemove via javascript)
However, you can trigger clicks on elements. To achieve that, you need to save the event(mouse-over|out/(dbl)click/whatever) and the according element (in the eventfunction: this). That should be sufficient to simulate theworkflow.
jQuery-Example:
$('#item').click();
$('#item').trigger('click');
vanilla javascript:
document.querySelector("#item").click();

Monitoring user behaviour with custom JavaScript

How I do monitor all the clicks and inputs on my page? I would ideally want to make a video of what the user does on my app; the way they uses my app.
How do I go about this?
Any links or demos would be really great.
Edit : What I have in mind is:
log all the events into a cookie , and send it to the server in frequent intervals.
then startup a Firefox session and trigger these events on the page . and capture it as a video.
Edit: Basically I have an app, and I want to see what the user does on the app, so I will monitor their clicks and inputs (that's pretty much what they do on the click), and then trigger those events back on my web app. So I will pretty be able to replicate their actions on my page. Now the question is, how do I capture all the necessary events, how do I serialize and trigger these events for later?
Not sure that you can make a 'video' unless you tracked every single movement of the mouse, which would extremely unfriendly, probably take a lot of processing time and raise ethical questions.
If you want to know how a user interacts with your site so that you can improve it (presumably) then you need to get into web analytics.
There are many options. My personal favourite is Google Analytics
With JavaScript you can create what's known as a heatmap of use clicks:
http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/
You can't capture a video of the users desktop session using JavaScript.
I remember seeing ClickHeat (or a similar variant) a long time ago. Had no experience with it, so I can't help with pros and cons, and it doesn't answer your question entirely (don't think it does keystrokes, although maybe I'm wrong, like I said I don't really know).
Might not be a total solution, but should be a good starting point.
In a similar vein it wouldn't be hard to capture mouse position every so often along with a timestamp and recreate a given user's actions. Generating a general/average movement is much more difficult with this type of data, but it's useful on the single-unit basis. So too with keystrokes, they're all just events.

FLEX App, Disabling the Back Button & Backspace/Delete Key from bumping out of the FLEX App

Should disabling the back button, backspace/delete key be done in the FLEX App or in JavaScript?
Any suggested solutions?
Thanks!
IMHO you should never take native browser control away from a user. While there are a few users that are going to inadvertently take themselves out of the app, the majority of users are going to be frustrated over not being able to perform an expected functionality (maybe not if you remove backspace, but definately if you take away the browser back button). Your overall frustration is going to be higher if you remove this functionality than if you leave it in default.
A better option is to open your app in a new tab or window. This takes away the need to remove any functionality and accomplishes your goal in a way that is acceptable to almost all users.
I'd recommend doing it in JavaScript, but there are difficulties with either solution. Different hardware platforms and browsers interpret keyboard signals differently, and I've had trouble capturing them with absolute certainty in Flash before. Just Delete should be okay from either, though JavaScript might give you more flexibility to tweak this based on the user's browser/platform if you needed to.

Categories