I'm working on a text editor-esque product where we're manually handling certain actions on keydown, and I've been having a hard time figuring out how to distinguish between the event.key 'Control' and/or event.code 'ControlLeft'/'ControlRight' for Mac vs Windows, which obviously do different things.
Any advice on how to handle keydown between operating systems for things like this?
Related
I know there are lots of javascript plugins and libraries to allow users to pick emojis for text inputs, but windows and mac already have native emoji pickers (⊞ Win. or CTRL⌘Space), Is there a way for me to open these native emoji pickers when a user clicks in a text field instead of installing plugins in my website?
I already tried emulate button key press, but it didn't work at all.
Short answer is no.
In order to access any OS feature from javascript, you need a corresponding browser API to support.
AFAIK, there isn't an API for that. There's a discussion here which suggests adding <input emoji /> to standard but seems no traction gained.
Edit: Below is my original answer, revised. Comments pointed out I was focusing on the wrong aspect of the question, I totally agree.
However, the OP obviously has some wrong idea about what you can do in javascript to leverage browser ability. So I think it's still worth clarification.
You can't send arbitrary emulated keyboard event from js and hoping the OS will respond. Were it possible, it'd be a severe security issue on browser's part. Imagine open a website and it fires a series of keyboard event to your OS and wipes out your desktop (totally feasible through shortcuts).
You need to understand the runtime env inside the browser is basically isolated from the one of native OS. Whatever OS feature that's accessible to your javascript is totally up for browser vendors to decide. For security reason, they are super careful in making these decisions.
Also, make a distinction on "what browser can do", and "what browser allows you to do in js". Seeing Chrome has an "Emoji & Symbols" context menu item, doesn't necessarily mean it decides to grant you the same ability in js.
To further clarify why the emulated keyboard event is fundamentally different from the native one, I include a graph here. The blue arrow is how emulated keyboard event flows. The farthest place it can reach is the browser's internal event bus. It never got a chance to reach the OS event bus, so no way to notify native emoji picker.
Is there some way to determine which keyboard connected to a device sent a particular key event in JS? For example, a laptop with a USB keyboard will happily honour keypresses on both keyboards but I cannot seem to find a way for the browser to tell me which source a key event came from so I can filter based on that (e.g. for player 1/2 input filtering for a browser based game, keyboard vs. "virtual instrument" for a browser based composing tool, etc.)
I couldn't find anything in the key events specs on MDN that suggests this is possible, but I'll be more than happy to take on any creative hack that makes this work "despite" rather than "thanks to" the spec.
Someone did ask this question back in 2013, and while its answer suggests using the gamepad API as workaround, it's now 2018 and three years of changes to JS APIs means that this question is worth reasking, in order get an answer based on the current state of the browser.
I dont know if it is already possible, but if would try something like that, i would study the WebUSB Api:
https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web
https://wicg.github.io/webusb/
Not so easy, but seems possible
It's not possible at present.
WebUSB won't allow access to HID devices, and WebHID won't allow access to devices (including keyboards) that are already supported by high-level APIs.
I've started a topic at the WICG incubator: https://discourse.wicg.io/t/identify-which-of-multiple-keyboards-an-event-came-from/3416
I don't have a Mac, but I have seen its keyboard on pictures and there is a Control key. However the strange thing to me is that on most keyboards shortcuts, system/command key is used instead. Does the Control key on Mac behaves in exactly the same way as Ctrl key on Linux/Windows (in web browsers). To be more specifc, does it keyCode === 17 and does event.ctrlKey work for it?
I just want to implement Ctrl shortcuts for my web application and I'm wondering whether they will work on Macs.
Yes, the keyCode for the Ctrl key is the same on Mac and PC (17).
The keyCode for the command key is 91.
From a usability point of view, Mac's user are not very used to use the Ctrl key since all the common shortcuts use the command key instead. So it would be good if your application support both.
I am investigating how to differentiate tablets with Windows 8 and other devices. According to this doc http://msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx there should be "Touch" token in UserAgent in tablets with Windows.
But I am worried, will laptops with touchscreen also have this token in UserAgent. Unfortunately, do not have such device and test in myself.
Can someone please confirm that this "Touch" token is used in Internet Explorer for tablets and mobile phones only?
OK so I think you created a diversion for some here, you are not trying to detect touch per se as much as you want to detect if a device is a tablet or desktop. As I stated earlier in my comment you should not use any user agent string to do feature detection, ever. Detect the features directly.
FWIW here is how I detect touch support in DeepTissue :
this.touchType = window.navigator.pointerEnabled ? "pointer" :
"ontouchstart" in window ? "touch" : "mouse";
Notice how I detect pointer events first then fall back to other input modality APIs?
On to what I think the essence of your question really is, how can I design an interface that is optimized for legacy desktops and modern touch enabled devices? This is where you need to tap that artistic part of your mind and meld it with valuable UX research by folks like Jacob Nielson on what works and what does not work. As you have seen Microsoft, Google and Apple all struggle with this same question it is not easy to answer. My advice, based on lots of experience, is to create a simple, responsive UI and grow from that. Start mobile first and design up from there. Remember, if it works with fat fingers then it will work with a mouse pointer. Touch is a direct input modality, where a mouse in indirect, so the experience is slightly different.
Make all your data actionable. This means instead of a small touch target with an anchor wrapped around text make the anchor wrap around the product photo. Make sure there is enough padding within the anchor to make the touch targets easier to hit and make sure there are margins between adjacent targets to reduce errors.
This is not an easy question to answer with an exact science because each application has its own character or personality. Users vary, etc. But one thing is for sure touch is quickly replacing non-touch devices and you need to account for that in any application design.
You cannot guarantee that any token, let alone the touch token, will be used only for Windows tablets or phones. Period. For example, the UA string can be modified by third party controls, group policy, and even the end-user. It's unpredictable, at best.
I know of no standard that dictates (normatively) the contents of the user-agent string. Various browsers and user agents have copied elements of other user agent strings for their own purposes to ensure that their user agent receives content. Indeed, the IE team is already on record as saying that the user-agent string for Windows 10 is designed to ensure the delivery of content, rather than the identification of the browser.
Because of this, reliance on the user-agent string is no longer considered a "good" practice, let alone a best one. This is only one reason why Microsoft's content has been advocating feature detection and other practices since the release of IE9. (Other resources have been deprecating the user-agent string for much longer.)
You haven't said why you need to differentiate one manufacturer's tablets and phones from another or what changes you hope to offer such differentiated devices. As a result, it's difficult (if not impossible) to recommend a more effective approach.
If you are trying to create an app that works only on these devices, then the web platform is probably not the one to use. If you're looking to provide content or functionality specific to these devices, the Windows Store platform (or the .NET framework) may be more appropriate. If you're looking for a way to exclude these devices from your offerings, then you may wish to consider an Android or iOS specific platform instead.
The web platform is meant, in part, to be device agnostic, to enable a consistent--and predictable--set of functionality across a wide set of devices, form factors, and operating systems.
Hope this helps...
-- Lance
Mozilla says... ish.
var isTouch = 'ontouchstart' in window ||
navigator.maxTouchPoints > 0 ||
navigator.msMaxTouchPoints > 0;
Is there any library which can capture key events on any operating system and call the handler based on what action was performed?
For example, undo on Windows in cntrl+z, but on mac it is appleKey/commandkey + z.
So my question is is there any library that can call my undo handler on Windows as well as Mac?
Mousetrap seems like a pretty good start point. From there, you can detect the Apple key ('command') and different sequences and make your own custom aliases. Shouldn't be too difficult. :-)
http://craig.is/killing/mice