I am developing a website using RWD principles and it is supposed to self adjust and work in both desktop and in tablets, and eventually in Mobiles as well.
I know in Android development we can catch a long tap event and do some actions.
But my question is that, is it possible to do it in HTML/HTML5 and Javascript?
Basically looking for a predefined event which gets fired on long press on html elements.
I have gone through This and understood all the alternatives suggested. Looking if anything new has been introduced in HTML5.
Might check out pointer.js from Mozilla. Apparently somewhat standardizes the touch/ mouse events into a single event type. Probably better than using timeouts, I'd imagine.
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
To give context, my team is building a rich text editor in the browser that needs to persist state to a server between sessions. The editor's state can obviously change from updates to the document that include keydown events, but we should also account for updates to the editor's stage that are triggered by undo/redo events.
Unfortunately the browser has no native undo/redo events (ref). One proposed hack floating around seems to be to stop propagation for keydown events that maps to undo's keyboard shortcut in addition to disabling the context menu. However, this still leaves open the ability for the user to navigate directly to Edit -> Undo in the application's menu bar, which will directly trigger a document.execCommand('undo') and doesn't fire an event. As a result we wouldn't know to send an update to the server.
Here's a W3C thread on this issue. As of the writing of this, it appears that a solution is still in the works...
When Quill, another browser text editor, ran into this issue their team seemed to advise: "disable the native undo/stack", which is what Facebook's Draft.js actually does. Given that seems to be what we're working with, does anyone know of a way to disable/substitute the browser's native undo/redo stack? Obviously, this is an aggressive solution, but, as of the writing of this, that seems to be the only option.
In the meantime, the answer to this question probably buried somewhere in the Draft's code. If no one beats my team to it, I'll report back on what Draft seems to be doing. Thought it was at least worth documenting this issue.
Likely the best solution is to listen for a debounced onChange event from the contentEditable element. This doesn't allow for custom behavior regarding undo, but it should solve the main issue. Also adding a beforeunload event to alert the user to potential unsaved changes should handle additional edge cases.
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 :(.
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