I'm developing an iPhone web app using jQTouch, and it contains a simple mailto:
link to a valid email address, which should launch the iPhone mail application when tapped—but it doesn't.
If I visit a "normal" web page in Mobile Safari which contains the exact same link, and tap on it, I get the expected result: the mail app pops up with the correct email address in the To field.
Here's the link HTML (with the address changed) just in case I'm going nuts and have made a stupid mistake, but it appears perfectly fine:
<p><a href="mailto:[email protected]">[email protected]</a></p>
Has anyone come across this when using jQTouch? Or can anyone at least suggest a way that I can debug this? At the moment when I tap the non-working link it flashes red (the active link state) and absolutely nothing else happens.
If mailto links don't open for you the way they should, a quick look at the system or browser settings should do the job. In Windows, head to Settings -> Apps -> Default apps. Scroll down and pick “Choose default apps by protocol” from the menu. For 'Mailto', choose the client of your choice.
In order to automatically open email (mailto:) links with Gmail in Safari, a Safari Extension must be installed. Depending on your version of OS X / macOS, your version of Safari will support different extension types. Note: to find out what version of OS X / macOS you have, follow these instructions.
# The pros of mailto email linkson mobile devices, users pretty much have to set up a default email address, so clicking this link does exactly what most mobile users intend: it opens up their compose dialog.
Administrators can configure Web@Work for iOS to open mailto links in Email+ for iOS using key-value pairs.
I found that adding target="_blank"
to the links worked -- except that on some desktop browsers, it opened a new blank window AND opened the email window. Granted, jqtouch sites aren't typically going to be viewed on desktop browsers, but I wasn't fond of that behavior.
Instead, here's what I did:
mailto:
link in the onclick
event and added return false
(so actual link to #
doesn't fire)noHighlight
class to the linkHere is an example:
<a href="#" onclick="window.location='mailto:[email protected]'; return false;" class="noHighlight">Email me</a>
I then modified the CSS in the theme file.
Before:
ul li a.active {
background: #194fdb url(img/selection.png) 0 0 repeat-x;
color: #fff;
}
After:
ul li a.active:not(.noHighlight) {
background: #194fdb url(img/selection.png) 0 0 repeat-x;
color: #fff;
}
The reason I added the noHighlight
class is that without it, the button would get highlighted and would "stick" which made the button look like it was still in some active state. To get around the issue, I added the class and modified the CSS as described above.
What the CSS change does is that if the link (inside of a li
which is inside of a ul
) has the class noHighlight
, it will NOT change the background or text color.
Seems to work great now on both desktop and mobile browsers.
I looked again at the example code in the jQTouch demo package and saw that they were adding a target="_blank"
attribute to their email link.
I did this to my link, and it began working (popping up the mail client window). However, the link that's in a standard web page works as well, but without the target="_blank"
attribute...
I'm puzzled, but adding that attribute seems to solve this problem if your mobile page is using jQTouch.
It works fine just with target="_blank".
For those (like me) who find it annoying to get the "This will open in a new page" popup every time you tap on a mailto or tel link you can do this:
Edit jqtouch.js and go to line 284:
if ($el.attr('target') == '_blank' || $el.attr('rel') == 'external')
Now replace this line by:
if ($el.attr('target') == '_self' || $el.attr('target') == '_blank' || $el.attr('rel') == 'external')
And on the HTML (e.g.):
<a href="tel:+351912345678">Call me</a>
becomes
<a target="_self" href="tel:+351912345678">Call me</a>
Excellent find, I'm doing the same thing and couldn't understand why until recently. If you look round line 161 and 284 in jqtouch.js rev 109 you see that the target attribute "_Blank" will keep jqtouch from hijacking your click event. It is intercepting the event because that is the primary mechanism to move from page to page.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With