Does my HTML prevent UIWebView to detect phone numbers?

StackOverflow https://stackoverflow.com/questions/5820881

Question

I have a UIWebView in which I want phone numbers to be detected.

My problem is that in a single UIWebView, some phone numbers are detected and clickable but others are not and I have no idea why.

Here is a snippet of my HTML :

0123456789 9999999999 
<div>1111111111</div>
<div>
  <ul>
    <li>
      <div>
        <h4>Name</h4>
        <p>Name</p>
      </div>
    </li>
    <li>
      <div>
        <h4>Telephone</h4>
        <p>0466303737</p>
      </div>
    </li>
  </ul>
</div>

The 3 first numbers on the 2 first lines are detected but the one inside the <p> element (line 14) is not.

Does anybody know why? Is there anything to do about it?

EDIT : as requested in the comments, here is the full HTML:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">/*  HTML5 ✰ Boilerplate  */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }


body { font:13px/1.231 sans-serif; *font-size:small; } 
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active { outline: none; }
a, a:active, a:visited { color: #607890; }
a:hover { color: #036; }

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }

nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #FF5E99; } 

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;    } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


 /* Primary Styles
    Author: 
 */














@media all and (orientation:portrait) { 

}

@media all and (orientation:landscape) { 

}

@media screen and (max-device-width: 480px) {


  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a:after { content: " (" attr(href) ")"; } 
  abbr:after { content: " (" attr(title) ")"; }
  .ir a:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }  
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/*** CUSTOM CSS **/

body {
  font-family: "Helvetica", sans-serif;
  background-color: #767676;
  color: #d4d4d4;
  font-size: 11pt;
  padding: 10px;
}

p {
  padding: 6px 0px;
}

h1 {
  text-align: center;
  font-style: italic;
  font-size: 14pt;
  margin-bottom: 10px;
}

h3 { width: 100%; clear: both;}

ul {
  margin-left: 32px;
  list-style-image: url(favourite-star-on.png);
}

.tableau ul { margin-left: 0px;   font-size: 9pt; }
.tableau li { display: block; padding: 3px 0; border-top: 1px dotted #e4e4e4; }
li h4 { float: left; width: 112px; padding: 6px 3px; }
li p { float: right; width: 172px; padding: 6px 3px; }
div:before, div:after {  content: "\0020"; display: block; height: 0; visibility: hidden;    } 
div:after { clear: both; }
div { zoom: 1; }

.tableau { background-color: #fefefe; border: 1px solid #e4e4e4; color: #3e3e3e; }
.tableau h2 { background-color: #f3f3f3; width: 288px; padding: 5px; border-bottom: 1px solid #e4e4e4; }
.tableau h3 { background-color: #f3f3f3; font-style: italic; width: 288px; padding: 5px; border-bottom: 1px dotted #e4e4e4; }
</style></head><body>0123456789 9999999999  <div class="myclass">1111111111</div> <div class="myclass">   <ul>    <li>      <div>        <h4>Name</h4>         <p>Name</p>       </div>     </li>     <li>       <div>         <h4>Téléphone</h4>         <p>0466303737</p>       </div>     </li>   </ul> </div></body></html>

ps : I live in France ie phone number => 10 digits

Was it helpful?

Solution

Phone number parsing is magic, and I'm afraid only Apple magicians have the powers to tell you how they do. And it is possible that it depends on many factors like iOS version, user locale, weather.

Since you're in a UIWebView I guess your HTML is iPhone only. Then why not making specific iPhone phone links, instead of relying on magic stuff? :) :

<a href="tel:+1-800-275-2273">
Call John Appleseed at 1-800-275-2273
</a>.

You could even inject some javascript into html with your own phone number detection/format algorithm if needed...

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top