Bagaimana cara menonaktifkan penautan nomor telepon di Mobile Safari?

Safari di iPhone secara otomatis membuat tautan untuk rangkaian angka yang muncul ke nomor telepon. Saya menulis halaman web yang berisi alamat IP, dan Safari mengubahnya menjadi tautan nomor telepon. Apakah mungkin untuk menonaktifkan perilaku ini untuk seluruh halaman atau elemen pada halaman?

Tampaknya ini adalah hal yang benar untuk dilakukan, menurut Referensi HTML Safari :

<meta name="format-detection" content="telephone=no">

Jika Anda menonaktifkan ini tetapi masih menginginkan tautan telepon, Anda masih dapat menggunakan skema URI "tel".

Ini adalah halaman yang relevan di Perpustakaan Pengembang Apple.

Untuk menonaktifkan tampilan penguraian ponsel untuk elemen tertentu, CSS ini sepertinya melakukan trik:

.element { pointer-events: none; }
.element > a { text-decoration:none; color:inherit; }

Aturan pertama menonaktifkan klik, yang kedua menangani styling.

Saya menggunakan joiner lebar nol ‍

Masukkan saja di suatu tempat di nomor telepon dan itu berfungsi untuk saya. Diuji di BrowserStack (dan Litmus untuk email).

Saya mengalami masalah yang sama. Saya menemukan properti di UIWebView yang memungkinkan Anda mematikan detektor data.

self.webView.dataDetectorTypes = UIDataDetectorTypeNone;

Tambahkan ini, saya pikir itulah yang Anda cari:

<meta name = "format-detection" content = "telephone=no">

Solusi untuk Webview!

Untuk aplikasi PhoneGap-iPhone / PhoneGap-iOS, Anda dapat menonaktifkan deteksi nomor telepon dengan menambahkan yang berikut ke delegasi aplikasi proyek Anda:

// ...

- (void)webViewDidStartLoad:(UIWebView *)theWebView 
{
    // disable telephone detection, basically <meta name="format-detection" content="telephone=no" />
    theWebView.dataDetectorTypes = UIDataDetectorTypeAll ^ UIDataDetectorTypePhoneNumber;

    return [ super webViewDidStartLoad:theWebView ];
}

// ...

sumber: Nonaktifkan Deteksi Telepon di PhoneGap-iOS .

Untuk menonaktifkan deteksi nomor telepon pada bagian halaman, bungkus teks yang terpengaruh dalam tag jangkar dengan href = "#". Jika Anda melakukan ini, Safari seluler dan UIWebView harus dibiarkan begitu saja.

<a href="#"> 1234567 </a>

Pikir saya sudah menemukan solusinya: letakkan angka di dalam <label>elemen. Belum mencoba tag lain, tetapi <div>membiarkannya aktif di layar beranda, bahkan dengan telephone=noatributnya.

Tampaknya jelas dari komentar sebelumnya bahwa tag meta berfungsi, tetapi karena beberapa alasan telah rusak di bawah versi iOS yang lebih baru, setidaknya dalam beberapa kondisi. Saya menjalankan 4.0.1.

Anda juga dapat menggunakan <a>label dengan javascript: void(0)sebagai hrefnilai.

Contoh sebagai berikut:
<a href="javascript: void(0)">+44 456 77 89 87</a>

Saya memiliki masalah yang sama, tetapi pada aplikasi web iPad.

Sayangnya, keduanya ...

 <meta name = "format-detection" content = "telephone=no">

atau ...

0 = 0
9 = 9

... bekerja.

Tapi, inilah tiga hacks jelek:

• mengganti angka "0" dengan huruf "O"
• mengganti angka "1" dengan huruf "l"
• masukkan rentang yang tidak berarti: misalnya, 555.5<span>5</span>5.5555

Bergantung pada font yang Anda gunakan, dua yang pertama hampir tidak terlihat. Yang terakhir ini jelas melibatkan kode berlebihan, tetapi tidak terlihat oleh pengguna.

Peretasan Kludgy pasti, dan mungkin tidak dapat dilakukan jika Anda menghasilkan kode secara dinamis dari data, atau jika Anda tidak dapat mencemari data Anda dengan cara ini.

Tapi, cukup dalam keadaan darurat.

Saya memiliki ABN (Nomor Bisnis Australia) yang ditekankan oleh iPad Safari menjadi tautan nomor telepon. Tidak ada saran yang membantu. Solusi saya adalah menempatkan tag img di antara angka-angka.

ABN 98<img class="PreventSafariFromTurningIntoLink" /> 009<img /> 675<img /> 709

Kelas hanya ada untuk mendokumentasikan untuk apa tag img dibuat.

Bekerja pada iPad 1 (4.3.1) dan iPad 2 (4.3.3).

Pengalaman saya sama dengan yang lainnya. Tag meta ...

<meta name = "format-detection" content = "telephone=no">

... berfungsi saat situs web berjalan di Mobile Safari (mis., dengan chrome) tetapi berhenti bekerja saat dijalankan sebagai aplikasi web (mis. disimpan ke layar beranda dan berjalan tanpa chrome).

Solusi saya yang kurang ideal adalah memasukkan nilai ke dalam kolom input ...

<input type="text" readonly="readonly" style="border:none;" value="3105551212">

Ini kurang dari ideal karena, meskipun perbatasan tidak diatur, iOS membuat bilah abu-abu multi-piksel di atas bidang. Tapi, lebih baik daripada melihat nomornya sebagai tautan.

Saya telah menguji ini sendiri dan menemukan bahwa itu bekerja walaupun tentu bukan solusi yang elegan. Memasukkan rentang kosong di nomor telepon akan mencegah pendeteksi data mengubahnya menjadi tautan.

(604) 555<span></span> -4321

<meta name = "format-detection" content = "telephone=no"> tidak berfungsi untuk email: jika HTML yang Anda persiapkan adalah untuk email, metatag akan diabaikan.

Jika yang Anda targetkan adalah email, berikut ini adalah solusi jelek tapi berhasil untuk Anda:

Contoh beberapa HTML yang ingin Anda hindari ditautkan atau diformat secara otomatis:

will cease operations <span class='ios-avoid-format'>on June 1,
2012</span><span></span>.

Dan CSS yang akan membuat keajaiban terjadi:

@media only screen and (device-width: 768px) and (orientation:portrait){
span.ios-date{display:none;}
span.ios-date + span:after{content:"on June 1, 2012";}
}

Kekurangannya: Anda mungkin memerlukan kueri media untuk masing-masing dari kombo ipad / iphone portrait / landscape

Anda dapat mencoba menyandikannya sebagai entitas HTML:

0 = 0
9 = 9

Masalah yang sama di aplikasi Sencha Touch diselesaikan dengan meta tag ( <meta name="format-detection" content="telephone=no">) di index.html aplikasi.

Trik yang saya gunakan yang berfungsi pada lebih dari sekadar Mobile Safari adalah dengan menggunakan kode pelarian HTML dan sedikit mark-up di nomor telepon. Ini membuatnya lebih sulit bagi browser untuk "mengidentifikasi" nomor telepon, yaitu

Phone: 1-8&#48;&#48;<span>-</span>62&#48;<span>-</span>38&#48;3

Saya juga memiliki masalah ini: Safari dan browser seluler lainnya mengubah ID PPN menjadi nomor telepon. Jadi saya ingin metode bersih untuk menghindarinya pada satu elemen, bukan seluruh halaman (atau situs).
Saya membagikan solusi yang mungkin saya temukan, ini adalah suboptimal tetapi masih cukup layak: Saya taruh, di dalam angka saya tidak ingin menjadi tel:tautan, ⁠entitas HTML yang merupakan karakter tak terlihat Word-Joiner . Saya mencoba untuk tetap lebih semantik (well, setidaknya semacam) dengan meletakkan char ini di beberapa tempat yang berarti, misalnya untuk ID PPN saya memilih untuk meletakkannya di antara kelompok digit yang berbeda sesuai dengan formatnya sehingga untuk PPN Italia I menulis: 0613605⁠048⁠8yang merender dalam 0613605⁠048⁠8 dan tidak diubah dalam nomor telepon.

Pilihan lain adalah mengganti tanda hubung dalam nomor telepon Anda dengan karakter ‑(U + 2011 'Unicode Non-Breaking Hyphen')

Saya benar-benar bingung dengan ini untuk sementara waktu tetapi akhirnya menemukan jawabannya. Kami membuat pembaruan ke situs kami dan memiliki beberapa angka yang dikonversi menjadi tautan dan sebagian tidak. Ternyata angka-angka itu tidak akan dikonversi ke tautan jika berada dalam <fieldset>. Jelas bukan solusi yang tepat untuk sebagian besar keadaan, tetapi dalam beberapa hal itu akan menjadi solusi yang tepat.

Jawaban ini melampaui segalanya pada 6-13-2012:

<a href="#" style="color: #666666; 
                   text-decoration: none;
                   pointer-events: none;">
  Boca Raton, FL 33487
</a>

Ubah warna menjadi apa pun yang cocok dengan teks Anda, dekorasi teks menghilangkan garis bawah, peristiwa penunjuk menghentikannya agar tidak dilihat seperti tautan di peramban (penunjuk tidak berubah menjadi tangan)

Ini sempurna untuk email HTML di iOS dan browser.

Mengapa Anda ingin menghapus tautan, membuatnya sangat ramah pengguna untuk memilih.

Jika Anda hanya ingin menghapus pengeditan otomatis, tetapi pertahankan tautannya bekerja cukup tambahkan ini ke CSS Anda ...

a[href^=tel] {
 color: inherit;
 text-decoration:inherit;
}

Pisahkan nomor tersebut ke dalam blok teks yang terpisah

301 <div style="display:inline-block">441</div> 3909

Solusi lain adalah menggunakan gambar nomor IP