Handheld device detection based on supporting js event - javascript

I'm searching for a method how to detect if the device is handheld.
Currently I'm using http://detectmobilebrowsers.com/ but I don't like the whole userAgent string detection method.
I came across this script (http://kangax.github.com/iseventsupported/) that tests the support of events in browser and it made me thinking what if I'll just test "mouseover" or "touchstart" event or both to deside if the device is handheld.
In my project I need to detect if the input password supports showing the last typed character like in iPhone or Android.
So what do you think, is the event detection approach good or is there any better solution?
UPDATE:
I decided to use (detect) the support of orientationchange event in browser.

Related

Detect if beforeinput is supported

I made use of the https://github.com/jaridmargolin/formatter.js library in my project and discovered it is not working properly on mobile devices.
My research showed that this is due to it's use of keypress which is evil and should not be used. So I decided to modify it and use "beforeinput" whenever available. And here lies the problem, how do I detect whether it is available?
I tried this methode: https://stackoverflow.com/a/2877424/13987708
But it doesn't work.
My Internet search only showed me a bunch of different veriations of the same methode when checking for detecting supported events in a browser. And I can see that this method most of the times works. it even works for the "input" event, but unfortunatly not for the "beforeinput" event.
I would love to find a way that does not rely on the user agent, as that is, so I'm told, very unrelyable.
// EDIT
Well, I did research the issue, I even say so in my question :duh:...
The situation is that "keypress" is deprecated and should not be used anymore, in fact in Chrome for Android it doesn't even fire anymore.
The above mentioned plugin to format user input relies on the methode, though.
So I went ahead and replaced it with the "keyup" methode, which indeed fires in Chrome for Android, but only gives a keyCode of 229, so it doesn't work either.
I dug a bit deeper into this whole keyboard events and found that modern browsers support the "beforeinput" event (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
Which is awesome, it gives you so much mor information about the interaction between the user and your input.
So I adapted the formatter to use the "beforeinput" event instead of "keypress", but my project has to support IE, which does not support "beforeinput".
That's why I need a way to detect if the browser supports this event, and use either the "keypress" or the "beforeinput" depending on the capabilities of the users browser.
And I am aware that a browser might support functionality which the user won't use, but it's not relevant for this use case, I just need to know if the browser will fire the "beforeinput" event or not.

onselectionchange Javascript event in webview

In my Android app I'm attaching a handler for the Javascript onselectionchange like this:
$(document).on('selectionchange',function(ev){
alert('Text has been selected');
});
This is supposed to be fired when the user selects something (like text) or the selection changes, however it is fired on tap. Does anyone know the reason of this behavior? (Something like this is working in iOS)
"onselectionchange" event is not a cross-browser feature.
AFAIK, it's only Trident (iexplore) and recent versions of webkit (and hence webview) that support text selection events.
That being said, could it be that the version of webkit present on the iOS you tested is more recent than your Android's version?
Also consider that though they both render with webkit, they use totally different javascript engines, hence potentially different behaviour.

How to check if a HTML5 video has ended on Windows Phone 7?

I noticed that Windows Phone 7's default browser doesn't fire the "ended" event when a HTML5 video has ended.
So I thought I could constantly check the current time every 100ms and then calculate:
if (videolength - video.currentTime <= 0) alert("ended");
This also won't work because Windows Phone 7's native browser always does: "170 - 0"
video.currentTime is always 0, no matter at which part of the video I check.
How can I check if a video has ended on Windows Phone 7 then?
Update: I just checked the user agent of the browser and it says ie9. So, why does it not want to fire the "ended" event?
If you're attempting to listen for the event using addEventListener, or via a jQuery binding, you need to use the event type "ended" rather than the name of the element's event handler "onended".
[Updated]
So it appears that IE 9 mobile supports a very limited subset of the HTML5 video API. This W3 demo is useful for testing which elements of the API it does actually support.
Depending on your requirements, which aren't completely clear from the question, it seems to me that your options are very limited. You could either:
Use the browser's native player, accept that there's no way of detecting the end of the video, and wait for Microsoft to get their act together in adding support for the sections of the API you need.
Use a Flash solution as a fallback (you'll need one anyway if you plan to support legacy browsers) and encourage the small, but admittedly growing, number of IE 9 mobile users to install the metro browser. It gets mixed reviews and it isn't entirely clear whether it supports Flash video players other than the ones listed, but does claim to support YouTube. It's probably worth at least considering.
Hope that Google update Chrome frame to work on Windows 7 phones. I have no idea how likely that is, but the idea of polyfilling IE 9 with Google frame amuses me and this answer has been pretty low on laughs so far.
Oh, and Microsoft, if you're going to follow Apple's example and drop support for Flash on your mobile devices, at least make sure your browser supports a useful amount of the HTML5 video API.

JavaScript events for mobile web?

There are JavaScript events for desktop web, e.g. mouse over, key press, etc. etc.
My question is why there is no JavaScript events for mobile web? e.g. fling? orientation change? etc. etc.
What if a web developer wants to write web pages specifically for mobile devices? How can they take advantage of phone specified user interaction (like the ones I mentioned)?
jQuery and other mobile application frameworks offer extended events for mobile devices. See some of the options below:
Sencha Touch
jQuery Mobile
There are JavaScript events for desktop web, e.g. mouse over, key press, etc.etc. My question is why there is no JavaScript events for mobile web?
There have been (relatively speaking) decent web browsers for desktops for a lot longer then there have been decent web browsers for mobile devices, so these things haven't been standardised. That doesn't mean they don't exist though.
A decade later and they are well supported and standardised.
Some events you can listen for include touchstart, ScreenOrientation.onchange, and devicemotion

Handle iPhone Events (like slide-left) in Mobile Web Site

Does the iPhone browser have special events that I can hook into with Javascript? For instance, if the users slides to the left, I would like to perform a certain action. If there are events like this available, it would be nice to see a reference for all of them. ideally, there will someday be a standard for all touch-screen mobile browsers.
You can access multi-touch events and gestures, but there is a fair amount of under-the-hood plumbing you'll likely have to handle yourself. Here is Apple's guide:
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
As an example of what can be done with a MobileSafari web app, check out this article on Apple's in-house "PastryKit":
https://daringfireball.net/2009/12/pastrykit
Particularly, you can use Safari on Windows or Mac (if you enable the developer menu in the preferences and set the useragent to MobileSafari 3.x) and check out the way it works.
Another UI library to look at is jQTouch:
http://www.jqtouch.com/
jQTouch really does the thing.
http://jqtouch.com
http://code.google.com/p/jqtouch/wiki/CallbackEvents
Do you really mean "when the device orientation changes", perhaps? If so, you may want to bind to the onorientationchange event.
There's a useful reference of all on* events at Apple's Safari Reference Library.
Perhaps the onscroll, ontouchstart, ontouchmove, or similiar events are what you're looking for. All listed on the Safari HTML Reference page.

Categories