Disabling hotkeys in Desktop Safari - javascript

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.

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

Permanent Full Screen in Browser

I am trying to create a simple quiz web app for students. They should not be able to access anything on the computer except the quiz questions.
So I found some methods like here to make the browser fullscreen. However, that does not prevent them from hitting escape key or F11 to exit the fullscreen mode, or they can hit the windows key to bring up windows menu (Hence accessing other programs in the computer).
Is there any way to stay in the fullscreen mode permanently and exit only with one of the admins' passwords (Just like TOEFL iBT exam). Is that possible through browser or I should write a native full-fledged program for that task?
function checkWH(){
if((window.outerWidth-screen.width) ==0 && (window.outerHeight-screen.height) ==0 )
{
alert('fullscreen');
}
}
$(window).keypress(function(event){
var code = event.keyCode || event.which;
if(code == 122){
setTimeout(function(){checkWH();},1000);
}
});
I think you can use something like this.
You can start certain browsers in "kiosk mode" which is meant to be used for running fullscreen applications on unmanned kiosks.
Based on this tutorial http://lifehacker.com/use-chromes-kiosk-mode-to-limit-someones-access-to-yo-1243433249
Open up Chrome's settings.
Under "Users" click "Add new user."
Give the new profile a name and picture. Make sure "Create a desktop shortcut for this user" is checked. Click "Create."
Right-click the newly-created shortcut and select "Properties."
In the "Target" field, add "--kiosk" (no quotes) to the end.
Click "Apply."
This puts the browser into a fullscreen mode and significantly reduces the ways you can escape from the browser but it isn't perfect; Alt+F4 will close the browser on Windows, for example.
You might be able to write a script to capture keypresses and discard any that press Alt or a function key, but this is fairly fragile and could affect the ability to actually type in answers.
The only other way around this is to not supply a hardware keyboard. Either build your quiz to only use pointing devices like a mouse or touch. If you need a keyboard, consider providing an on-screen keyboard with a limited key set.

jQuery - Allow Autoshow Keyboard on Mobile

I have a Rails app that has a closed back-end. On certain pages, I want to auto-select a text input so I can use an external bluetooth scanner to scan a barcode without selecting it with a mouse/touchscreen every time. This works perfectly on non-mobile devices. However, on mobile devices (mostly tablets), I want the keyboard to popup (as the scanners are viewed as "keyboards" by the system). I know this is prevented by iOS, because it could be annoying. However, I want to know:
Can I have the keyboard auto-appear on Android and/or Windows tablets?
On iOS, can I change this default behavior so the keyboard DOES auto-appear? I have access to all the devices this behavior would be needed.
Edit: I know that I can use a click event to make the keyboard appear (that is how it appears now). However, I do not want to touch the tablet every time I want to scan.
There are some workarounds except using great prompt().
Wrap the web application into Phonegap and do the following way.
Keeping in mind that bluetooth scanner needs a first click to enable listening to keyboard events, you can slightly change js-code to perform first click manually (say, fullscreen textarea) and then deal with scanner. It can be a textarea that hides right after a first click and everything is done with javascript without textarea in view.
Looks like Windows smartphones can help you, can't find any issue concerning a problem.
I've tested autofocus fiddle in Chrome56 with Windows 8.1, Windows10 and an old Windows Mobile 8.1 at Nokia Lumia. In first two cases it does listen to keyboard after focusing. The latter one doesn't.
Bonus. HTC One M8 emulator with Android 4.4 listens to keyboard without a click. Tested with browserstack service. What if there are some android examples without need to click?
Bonus2 - autodetect scanner library.
Based on thoses answers you have to try some workarounds
You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from >opening your dialog), the keyboard shows up
In your case at the openning of your page ?
At least maybe this JS fiddle can help you or this one
You can use JavaScript in built functions for event handling such as focus(), prompt() to initiate bar code scanning function. Also changing some of the usability would also be helpful in this case. For building hybrid apps try some reading on Cordova Keyboard Plugin at https://github.com/cjpearson/cordova-plugin-keyboard
Happy Coding.
try below code. It might work
// div is some selected element
var f = function(event) {
$timeout(function() { // angular way, setTimeout is OK
input[0].focus();
event.preventDefault();
})
};
var mobile = false;
div.on('click', function(event) {
if(mobile) return;
f(event);
});
div.on('touchstart', function(event) {
mobile = true;
f(event);
});
div.on('touchend', function(event) {
event.preventDefault();
event.stopPropagation();
});
My best bet is using offsite input and focusing there. It will help you to control -
the timing of keyboard appearance(setTimeOut)
Check and reopen the keyboard
You will need to do something like this-
<input type="text" style="visibility: hidden; position: fixed; left: -200px" >
With jQuery-
$("#theOffViewBox").focus();
This will work equally on iOS/Android/Windows/Linux as being base JavaScript jugad.

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}

Hotkeys in webapps

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?)

Categories

Resources