innerHTML無法在iPhone上工作

Question

我剛在一個神祕的問題上花了幾個小時太多。我沒有找到任何東西通過谷歌。我想分享這個發現。

這裏的代碼在PC上會產生預期的結果，但意外的在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>

預期成果：

1233453455 
1233453455 

iPhone結局：

1233453455 
NaN 

爲什麼？

Answer 1

iPhone在執行javascript代碼之前更改了innerHTML內容！ 「長號碼」被解釋爲電話號碼（在這種情況下它不是這樣），並在innerHTML內部添加一個tel鏈接。觀察什麼alert窗戶透着（以下執行腳本在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>

所以沒有爲「意外結果」的原因。

作爲一個解決方案：在我的情況下，我簡單地切換到一個不同的容器，用於我的文本（I使用的data-屬性）：

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>

另一個似乎被描述here （感謝@epascarello for pointing this out）。但是，這將禁用您的網頁上的所有電話號碼鏈接...