[已解決] iphone 的 safari 不認識 html5 的 data-* property?

jquery safari chrome browser html5

Brandon 2019-03-22 17:26:22 ‧ 2706 瀏覽

分享至

有人遇過(下圖)的狀況嗎? data-** 好像不被browser 認識

正常應該像這樣：

我有一支程式，前端是用 datatable.net (for jquery) ，今天被客戶發現，在 iphone 的 safari 出現怪現象。

但這一段沒有特別的東西啊? 底下是用 chrome 看 render 出來的 code:
<input type="checkbox" class="my-checkbox" data-voucher-no="20171227001" data-rowindex="2" data-modify-time="2017/12/27 16:18:54">

然後我試了一下，在 iphone 的 chrome ，在 imac 的 safari ，都是正常的。所以是 iphone 的 safari 不認識 data-** 的關係嗎? 這算是 jquery 的鍋嗎?

Brandon iT邦新手 4 級 ‧ 2019-03-25 10:15:45 檢舉

我自已試了一下，把 data-voucher-no="20171227001" data-rowindex="2" data-modify-time="2017/12/27 16:18:54" 這一段拿掉畫面就正常。但我需要這一段資訊讓 jquery 判斷資料屬性。這有解嗎?

Brandon iT邦新手 4 級 ‧ 2019-03-25 11:40:32 檢舉

用 imac debug ，才發現是我的資料如果看起來像電話號碼， safari 自動加上 <a href=\"tel:20171227001\">20171227001</a>" , 這什麼鬼?

Brandon iT邦新手 4 級 ‧ 2019-03-25 12:05:29 檢舉

找到答案了，的確是 safari 搞的鬼。
解法是在 head 中加上
<meta name="format-detection" content="telephone=no">
就可以了

請參考
https://n8finch.com/disable-phone-number-linking-ios-safari/

登入發表討論