I have came across an issue with my application when using the iPad.
For a specific form I use jQuery to bind events to form elements, I have a "tool tip" that shows when you mouse over the form field or focus is put on it, this works fine on the desktop. However, on the iPad (and other touch devices no doubt) the first click/tap/touch into the field is detected as mouseenter, so all this does is just show the tool tip.
However, I would like this to allow data entry into the field on first touch, rather than the second as it is doing just now. So in other words, i'd like it to behave the same on the iPad as it does on the desktop namely, show the tool tip and allow data input.
Do I have to detect the device and spoof a mouseenter as a click or something similar?
// Attach focus and blur events to form elements
bindFocusAndBlurOnFormElements($('INPUT:text, INPUT:password, TEXTAREA, SELECT'), false);
function bindFocusAndBlurOnFormElements(elems) {
elems.each(function(){
if ($(this).next().hasClass('tool_tip')) {
$(this).bind('mouseenter mouseleave focus blur', function(e){
alert(e.type);
if (e.type=='mouseenter' || e.type=='focus') {
// show the tool tip
} else {
// hide the tool tip
}
});
}
}
}
One other way could be using CSS media queries and using some styles only for smaller screens / mobile devices, which are the ones most likely to have touch / tap functionality. So if you you have some specific styles via CSS, and from jQuery you check those elements for the mobile device style properties you could hook into them to write you mobile specific code.
More Info: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/
Another source:
Modernizr is a great, lightweight way to do all kinds of feature detection on any site.
It simply adds classes to the html element for each feature.
You can then target those features easily in CSS and JS. For example:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
And Javascript (jQuery example):
$('html.touch #popup').hide();