Input Type: Email, URL, Phone

CM1 Ideas and Feature Requests
1

Email, Phone number and Website url are the three most commonly used contact detail which has its unique input patterns. This will be super useful and very important when it comes to mobile usage. Also good for accessibility too (for colleges/universities).

We need better control of “type” attribute for the form…

Example: <input type="tel"> inputs to “number” and you get the numeric keyboard on the iPhone / Android browser (Great example: ZIP Code and Phone Number)

Example: <input type="url"> inputs to “url” and has at least one dot in the middle and most of them ending with “.com” on iPhone / Android keyboard.

Example: <input type="email"> inputs to “email” and has an @ and ending with “.com” or “.net” or “.something else” on iPhone / Android keyboard.

Very good article explaining about this: http://html5tutorial.info/html5-conta… with screenshots

If you have any questions, please let me know.

2

hi,

So my question is kind of related to this. When I first launched my site mobile chrome on phones seemed to auto detect phone numbers and make them clickable when on your cell phone. Now all of a sudden it has stopped. Not sure why? Safari and Samsungs native browsers are both auto detecting phone numbers and making them active but mobile chrome has stopped. Not sure why and I need to fix it.

I saw some js scripts that you can write to auto wrap phone numbers with the tel:// href but it looks like a pain to implement due to the having to name your divs that you want wrapped. I need some kind of auto detect solution so that if my users put phone numbers in thier body text anywhere on the site it will be detected.

I tried this meta tag but its still not working for chrome.

here is my page
http://www.oldscollege.ca/bottomNav/a…

I am using 4.2 cm1 any ideas?

3

I checked and same thing happened to me. I don’t think it’s our site (I checked other sites too). Chrome seems to disable it but not Safari. Not sure why.

4

@sandy - try this http://jsfiddle.net/PShYy/2/ (source: http://stackoverflow.com/questions/17…)

5

HI thanks for those I forgot you can do pattern matching

So I tried it it works (now I just have to style it)

But for some reason the last line in this script causes my js slider/banner to stop working any ideas?

Here is how I implemented it (having a hard time getting my code to show up in this post?? I only have the function listed once in my real code, and it doesn’t call its self again like its showing here)

$(document).ready(function(){   
checkForPhoneNumbers();   
});   
 
function checkForPhoneNumbers()   
{   
var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g;  
var text = $("body:first").html();   
text = text.replace(regex, " $(document).ready(function(){   
checkForPhoneNumbers();   
});   
 
function checkForPhoneNumbers()   
{   
var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g;  
var text = $("body:first").html();   
text = text.replace(regex, "```   
 
I traced it out line by line and its only this line

$(“body:first”).html(text);

  
 that causes my banner to stop working? I know this is kind of a tough question because you don't know how my banner is set up, but I just thought I'd ask in-case there is something really obvious.   
  
 THanks again   
 Sandy
6

Keith Freund came up with this one. It works much better!!! Just targets the Rich text widgets and not the entire html page so it doesn’t interfere with other stuff. Works beautifully.

The other code here is the same part in the post above in the links

Thanks Keith!!!

 
<script> <br /> $(document).ready(function() { <br /><br /> var regex = /((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/g;
<br /><br /> $('.rxbodyfield').each(function() { <br /><br />
var theText = $(this).html(); <br /><br />
theText = theText.replace(regex, "<a href="tel:other code here"); <br /><br />
$(this).html(theText); <br /><br /> }); <br /><br /> }); <br /> <script> <br /><br />



.rxbodyfield gets added to all rich text widget output.

7

Good point Sandy!! Glad you brought that up!