innerHTML not working on iPhone

Question

I just spent a few hours too many on a mysterious issue. I did not find anything via google. I want to share the finding.

Here's code that produces expected outcome on a PC, but unexpected on an iPhone:

var input = document.getElementById('input');
var output = document.getElementById('output');
output.innerHTML = parseInt(input.innerHTML);

<div id="input">1233453455</div>
<div id="output"></div>

Expected outcome:

1233453455
1233453455

iPhone outcome:

1233453455
NaN

Why?

http://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari — epascarello, Nov 17 '16 at 12:41

score 1 · Accepted Answer · edited May 23 '17 at 12:09

The iPhone changes the innerHTML content before executing javascript code! the "long number" is interpreted to be a phone number (which it isn't in this case) and adds a tel link inside the innerHTML. Observe what the alert windows reveals (execute below script on an iPhone):

var input = document.getElementById('input');
var output = document.getElementById('output');
alert('input content: ' + input.innerHTML)
output.innerHTML = parseInt(input.innerHTML);

<div id="input">1233453455</div>
<div id="output"></div>

So there is the reason for the "unexpected result".

As for a solution: in my case, I simply switched to a different container for my text (I used a data-attribute):

var input = document.getElementById('input');
var output = document.getElementById('output');
output.innerHTML = parseInt(input.getAttribute('data-test'));

<div id="input" data-test="1233453455">1233453455</div>
<div id="output"></div>

Another seems to be described here (thanks to @epascarello for pointing this out). But that will disable all phone number linking on your page...

innerHTML not working on iPhone

1 Answers1