Hapus gaya nomor telepon Microsoft Edge

95

Saya perhatikan bahwa browser Microsoft Edge baru menimpa gaya saya saat mendeteksi nomor telepon:

<span class="phone">(123)123-1234</span>

Lihat jsfiddle ini (harus dibuka menggunakan Microsoft Edge: P).

Hal ini mengganggu desain situs web, dan agak menjengkelkan. Tentu tampak seperti sifat penerus IE: /

Bagaimana cara mengganti atau menonaktifkan ini sehingga pengguna situs web saya tidak akan melihatnya?

html css microsoft-edge

— karns
sumber

Saya harap ini sebenarnya tidak disebabkan oleh malware ...

— karns

Periksa add-on (tidak memiliki Edge), tetapi beberapa add-on menyebabkan perilaku tersebut di IE-s ...

— sinisake

7

Saya baru saja hari ini berkomentar tentang ini di Twitter: mobile.twitter.com/scunliffe/status/631484565492625409 setidaknya sejauh yang saya bisa lihat untuk saat ini sampai Microsoft membalikkan keputusan buruk ini, Anda perlu menambahkan <meta name="format-detection" content="telephone=no"/>ke setiap halaman yang harus Anda singkirkan ini. :-(

— scunliffe

1

Ini juga diterapkan pada bilangan lintang / bujur seperti 145.1231321

— lihat

1

Juga format angka yang disorot bervariasi dengan pengaturan wilayah ("Lokasi rumah") dari PC pengguna, jadi ini akan mempengaruhi semua pengguna secara berbeda! Ini berarti ketika Anda menguji halaman Anda, pengguna akhir Anda mungkin benar-benar melihat sesuatu yang berbeda meskipun menggunakan browser yang sama: docs.microsoft.com/en-us/previous-versions/windows/…

— SharpC

172

Anda dapat menghilangkannya dengan menambahkan tag meta ini di header halaman Anda.

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

Dokumentasi Microsoft tentang tag ini .

Semoga ada cara yang lebih baik untuk mematikan ini secara global tanpa membengkak halaman ... Atau lebih baik lagi menonaktifkan fitur ini secara default.

— scunliffe.dll
sumber

Jawaban yang bagus! Bisakah Anda menambahkan tautan ke dokumen tentang ini?

— karns

9

Desain bodoh. Jika seseorang ingin melakukan itu. Setidaknya, Anda dapat mengizinkan atribut seperti "detect-phone = true" menjadikannya opsional, karena terkadang webapp Anda tidak perlu melakukannya jika tidak dimaksudkan juga ...

— Miguel

59

Jika Anda tidak ingin menonaktifkan untuk seluruh halaman seperti yang disarankan oleh jawaban yang dipilih, Anda dapat menambahkan atribut berikut ke tag tertentu

<p x-ms-format-detection="none">

Referensi: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/dn265018(v=vs.85)#controlling-phone-number-detection

— maguy
sumber

9

Saya tahu ini sedikit jawaban lama, tetapi bagi siapa pun yang mencari ini: Saya harus menambahkan ini ke tag induk (seperti <div> yang merupakan langkah maju dari label atau apa pun yang Anda gunakan untuk menampilkan telepon jumlah).

— Dortimer

+1 untuk jawaban dan komentar Debasertron. Selanjutnya pada komentar, tampaknya perlu menjadi induk tingkat blok - Saya mencoba dengan span, yang tidak berfungsi, tetapi div baik-baik saja.

— Masala

31

Jawaban di atas berfungsi dengan sempurna, tetapi menonaktifkan kemampuan untuk memiliki klik untuk menelepon nomor telepon (yang merupakan masalah utama jika Anda membangun situs yang responsif). Saya telah menemukan cara yang lebih baik untuk menjadikan nomor telepon sebagai tautan. Contoh:

<a href="tel:888-888-8888">(888) 888-8888</a>

Ini kemudian akan memungkinkan Anda untuk memberi gaya "tautan" sesuka Anda, dan gaya "a" di CSS Anda menimpa gaya Edge dan iPhone pada nomor telepon. Satu-satunya masalah dengan ini adalah membuat nomor telepon menjadi tautan untuk semua perangkat, tetapi saya menemukan ini tidak menjadi masalah karena hampir setiap perangkat memiliki semacam fitur atau aplikasi klik untuk menelepon yang disertakan.

— cameron
sumber

1

Pendekatan terbaik di mata saya!

— conceptdeluxe

Meskipun, pertanyaannya adalah "bagaimana cara menonaktifkan", saya harus setuju ini akan menjadi respons yang lebih baik jika Anda mencoba membuat situs responsif dengan mempertimbangkan penggunaan ponsel.

— JStev6

3

Saya telah menghadapi masalah ini, tetapi dengan kasus penggunaan yang sedikit berbeda: Nomor yang disoroti bukanlah nomor telepon, jadi saya tidak menginginkan pemformatan khusus.

Misalnya, Anda mungkin memiliki sesuatu seperti:

<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

Bagi saya *, Edge akan diubah 08 2017 10menjadi tautan nomor telepon. Terima kasih, Edge!

Saya telah menemukan bahwa Anda bisa menyiasati ini dengan memasukkan inline-blockelemen tak terlihat ke tengah string:

.notel{
  display:inline-block;
  height:0px;
  width:0px;
}

<span class="phone">(763)219-5222</span>
<div>The current date/time: May 08 2017 10:44:58 GMT Daylight Time</div>

<br>
<span class="phone">(763)2<span class="notel"></span>19-5222</span>
<div>The current date/time: May 08 2<span class="notel"></span>017 10:44:58 GMT Daylight Time</div>

Luaskan cuplikan

Saya tidak dapat melihat apakah ini berfungsi untuk nomor telepon Anda karena saya tidak melihat sorotan dalam kedua kasus tersebut. Anda mungkin perlu mendorong pemosisian span.

Kebetulan, fakta bahwa Anda dapat melakukan ini adalah salah satu dari banyak alasan Anda tidak boleh menyalin perintah dari halaman web dan ke terminal Anda:

span{
display:inline-block;
height: 0px;
width: 0px;
overflow:hidden;
}
textarea{
  width: 300px;
  height:50px;
}

<div>echo "HELLO" <span>&& wreck this machine</span></div><div>echo "WORLD"</div>

<textarea ></textarea>
<div>
Select, copy and paste above commands into the textarea.
</div>

Luaskan cuplikan

* Saya pikir penyorotan angka Edge bersifat regional. Jsfiddle Anda tidak disorot untuk saya, tapi saya di Inggris. Ini sepertinya menyoroti angka yang dimulai dengan 0.

— Jools
sumber