I have a simple query:
My web application allows users to use keyboard shortcuts like Ctrl-X etc. to invoke events that require fast input and action e.g Aborting an action that was just carried out quickly.
I am aware of the events to bind to in js for desktops.
However, while I am aware of the tap events and events available for both desktop and mobile browsers (keypress etc.), I would like to ask your opinion on what events could be bound to specifically in mobile browsers, such as muting, volume up/down. The answers I found in Google were archaic and not very cross-browser compliant
So simply put, are there any events, for actions by the user, specifically for browsers on mobile devices that can be bound to, in the event that using click and tap events are too slow or cumbersome?
JQM by itself cannot access the buttons on the phone, if you want to do that you'll have to write additional Java code to access the buttons through the original Android API.
Or, you could use Phonegap: http://docs.phonegap.com/en/2.0.0/cordova_events_events.md.html#Events
Check it out, you can use the "volumeup" or "volumedown" events.
As far as I know, the best you can get is the touch events.
Take a look at http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/Introduction/Introduction.html for iOS, not sure if the same documentation exists for android/BB.
It seems odd for a web app to override the default behavior of heavily OS involved physical buttons on the device, like volume/power/home buttons, as the user would experience abnormal behavior which would be confusing to the average user. I doubt it is possible to intercept them in a web app.
EDIT: This specific link has a list of iOS web events you can listen for in a table at the bottom:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
Related
I'm writing a web application with a lot of drag and drop functionality and I want to enable haptic feedback (when possible, using macOS 10.11+ with a Force Touch trackpad) for actions like "snapping in" while dragging items.
Is this possible (I know it's impossible to support every platform, but at least when hardware supports it)? I've tried navigator.vibrate with different time values/patterns but it doesn't seem to do anything even if it returns true.
Should work with the Force Touch events, one of which is webkitmouseforcedown
someElement.addEventListener("webkitmouseforcedown", myFunction, false);
You can read more about this and the other events here
Please note that this will work only on Safari unfortunately
In past mobile apps that I developed, I found that the click event did not work as expected in all devices (for example: in games in which the user had to tap/click quickly on the screen, instead of triggering the click event, the double click was triggered), and using touchstart gave better results for what I wanted.
Since then, I started listening to the touchstart event instead of click; but testing on Chrome, I got the following warning message in the JS console:
Performing operations that require explicit user interaction on touchstart events is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5649871251963904 for more details.
I visited the linked page (and the links inside it) and it seems that this new behavior is to avoid certain unwanted actions, and in particular to avoid third-party iframes or ads (my app has none) from opening pop-ups. I tried changing the event to touchend (as one of the links stated "The touchend event will continue to behave as before"), but got a similar warning message.
And my questions:
Is this something that only affects Chrome, or will it affect my web apps (with Cordova/Phonegap) for Android and iOS?
What event should I use to replace touchstart and avoid the issues I faced in the past? I could go back to click, but fast clicking/tapping would still be a problem.
When creating Cordova app, you target different OS versions, Android 5 and up has auto updating webview based on Chromium, so that problem will probably affect your apps.
But since Chrome 32, when using this viewport <meta name="viewport" content="width=device-width">, the click delay should go away (see this article), so you could safely use click event. Latest webviews on android 5 and 6 are based on Chromium 52.
You can also use fastclick library that will "fix" the click delay only where it's necessary
I have built a website that uses some simple JavaScript. I make use of many events throughout the website such as the input and submit event for validating and processing a contact form, the focus event for some form-related things and a dynamically-created tab interface, etc. I register all of these handlers using element.addEventListener("event", handler).
My JavaScript works wonderfully everywhere that I have been able to test (Firefox and Chrome on Ubuntu; Firefox and Chrome on Android), except for on iOS devices (regardless of what browser is used), where it seems that very few events are being fired.
It has been difficult for me to debug what the issue is on iOS devices because I do not have an OSX computer to connect an iOS device to so that I can use the remote console. I have come to the conclusion that the events are not firing for a few reasons:
The contact form on the website is being submitted even though I make a call to event.preventDefault() in the form's submit event handler, and do not explicitly submit the form anywhere after that.
I have tried catching any errors and displaying them in an alert like so:
window.onerror(function(err) { alert(err) })
to no avail (i.e. no errors were caught).
I have adapted all my functions to make use of only the click event, and then they work perfectly!
The last point is a possible solution to the problem, but I think it is bad practice to adapt all my work to one specific platform and rely only on a single event when there are so many purpose-built events that can be used and that are supposedly supported by iOS in the first place.
Why are so many events not being fired on iOS devices?
The problem was actually that I had made a const declaration in strict mode, which is, according to caniuse, not recognized in the current versions of both Safari and iOS Safari (9.1 and 9.3, respectively, as of writing).
I have better documented this problem in another question and answer.
I have a bootstrap .btn that I want to toggle with the mouse click. The problem is that the response is way too slow on tablets, since the click arrives 300 ms after the touchstart in mobile browsers.
I tried binding the logic in the touchstart event, effectively breaking the app for desktop browsers where there is no touchstart. I then thought of binding the same logic also to click but then I get a repeated event in mobile browsers. I've juggling around, trying to unbind from click the first time I receive a touchstart, and so on, and managed to come up with a design so complicated that there is always some quirk here or there that I cannot solve.
For instance, I can't get a text input to receive focus in the tablet: if I do focus on touchstart then the click event returns the focus to the button. I tried jQuery Mobile's vmousedown, but I couldn't manage to have multi-touch (tapping more than one button at the same time only changed one of them). I don't want to reinvent a lot of wheels, and I'm sure I must be missing something obvious, either on jQuery Mobile, or plain JavaScript.
In concrete, I want an event like vmousedown that works both on desktops and mobiles, only fires once on each, and allows multi-touch.
Utilize Modernizr for handling actions based on the device, etc. It provides great cross-browser/platform support without the need to sniff User Agents and the like. Instead, it uses feature detection.
You can just use the Modernizr functions with jQuery's $(document).ready(function()});
$(function(){
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
});
This code has been taken straight from the Modernizr Documentation
Also, here's another resource for performing touch tests
Late to the party, but note that jQueryMobile also has similar touch detection:
if ( $.mobile.support.touch ) {...
And no, IMHO, you are not missing anything obvious :), cross-platform / cross-device / touch-friendly features are still harder than they should be. For example, today I'm looking at a win8 surface tablet: touch-screen and a mouse. There are cases where i'd like to know which device was used. event.originalEvent.type should differentiate between tap and click, right? wrong :(.
I have a bootstrap .btn that I want to toggle with the mouse click. The problem is that the response is way too slow on tablets, since the click arrives 300 ms after the touchstart in mobile browsers.
I tried binding the logic in the touchstart event, effectively breaking the app for desktop browsers where there is no touchstart. I then thought of binding the same logic also to click but then I get a repeated event in mobile browsers. I've juggling around, trying to unbind from click the first time I receive a touchstart, and so on, and managed to come up with a design so complicated that there is always some quirk here or there that I cannot solve.
For instance, I can't get a text input to receive focus in the tablet: if I do focus on touchstart then the click event returns the focus to the button. I tried jQuery Mobile's vmousedown, but I couldn't manage to have multi-touch (tapping more than one button at the same time only changed one of them). I don't want to reinvent a lot of wheels, and I'm sure I must be missing something obvious, either on jQuery Mobile, or plain JavaScript.
In concrete, I want an event like vmousedown that works both on desktops and mobiles, only fires once on each, and allows multi-touch.
Utilize Modernizr for handling actions based on the device, etc. It provides great cross-browser/platform support without the need to sniff User Agents and the like. Instead, it uses feature detection.
You can just use the Modernizr functions with jQuery's $(document).ready(function()});
$(function(){
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}
});
This code has been taken straight from the Modernizr Documentation
Also, here's another resource for performing touch tests
Late to the party, but note that jQueryMobile also has similar touch detection:
if ( $.mobile.support.touch ) {...
And no, IMHO, you are not missing anything obvious :), cross-platform / cross-device / touch-friendly features are still harder than they should be. For example, today I'm looking at a win8 surface tablet: touch-screen and a mouse. There are cases where i'd like to know which device was used. event.originalEvent.type should differentiate between tap and click, right? wrong :(.