Bagaimana cara menandai nomor telepon?

471

Saya ingin menandai nomor telepon sebagai tautan yang dapat dipanggil dalam dokumen HTML. Saya telah membaca pendekatan Microformats , dan saya tahu, bahwa tel:skema tersebut akan menjadi standar, tetapi secara harfiah tidak ada yang diterapkan.

Skype mendefinisikan, sejauh yang saya tahu, skype:dan callto:, yang terakhir telah mendapatkan popularitas. Saya berasumsi, bahwa perusahaan lain memiliki skema lain atau melompat ke callto:kereta.

Apa praktik terbaik untuk menandai nomor telepon, sehingga sebanyak mungkin orang dengan perangkat lunak VoIP dapat mengklik tautan untuk mendapatkan panggilan?

Pertanyaan bonus: Adakah yang tahu tentang komplikasi dengan nomor darurat seperti 911 di AS atau 110 di Jerman?

Bersulang,

Pembaruan: Microsoft NetMeeting menggunakan callto:skema di bawah WinXP. Pertanyaan ini menyarankan, bahwa Microsoft Office Communicator akan menangani tel:skema tetapi bukan skema callto:. Hebat, Redmond!

Pembaruan 2: Dua setengah tahun kemudian sekarang. Tampaknya mendidih ke apa yang ingin Anda lakukan dengan nomor tersebut. Dalam konteks seluler, tel:adalah cara untuk maju. Menargetkan desktop tergantung pada Anda, jika Anda pikir pengguna Anda lebih banyak orang Skype ( callto:) atau lebih mungkin tel:memasang sesuatu seperti Google Voice ( ). Pendapat pribadi saya adalah, ketika ragu digunakan tel:(sesuai dengan jawaban @Sidnicious ').

Pembaruan 3: Pengguna @ rybo111 mencatat, bahwa Skype di Chrome sementara itu tel:ikut - ikutan. Saya tidak dapat memverifikasi ini, karena tidak ada mesin dengan keduanya, tetapi jika itu benar, itu berarti kami akhirnya memiliki pemenang di sini:tel:

Boldewyn
sumber
1
Sayangnya tidak. Tampaknya bermuara pada apa yang penyedia Anda (VoiP, comp ponsel atau apa pun) tidak. Ini mungkin akan dikenakan biaya untuk 800 nomor.
Boldewyn
1
Saya menggunakan Google Voice di Chrome dan tidak mengenali tel:URI. Saya masih bertahan callto:dan tampilan nomor telepon pada teori bahwa browser ponsel harus secara otomatis mendeteksi nomor tersebut.
Old Pro
5
Terlepas dari judulnya, pertanyaan ini benar-benar "skema URL apa yang harus Anda gunakan untuk nomor telepon", daripada bagaimana cara menandainya.
Raedwald
1
@Boldewyn Skype diminta saat menggunakan Chrome dengan tel:jadi mungkin Anda harus menghapus komentar Anda di akhir tentang penggunaan Skype callto:?
rybo111
1
Bisakah Anda mencoba mengedit pembaruan pertanyaan Anda menjadi jawaban yang sesuai. Seperti ini agak berantakan.
idmean

Jawaban:

495

The tel:Skema itu digunakan pada akhir tahun 1990 dan didokumentasikan pada awal tahun 2000 dengan RFC 2806 (yang usang oleh lebih-menyeluruh RFC 3966 pada tahun 2004) dan terus ditingkatkan . Mendukung tel:pada iPhone bukanlah keputusan yang sewenang-wenang.

callto:, sementara didukung oleh Skype, bukan standar dan harus dihindari kecuali secara khusus menargetkan pengguna Skype.

Saya? Saya baru saja mulai memasukkan tel:URI yang terbentuk dengan benar di halaman Anda (tanpa mengendus agen pengguna) dan menunggu ponsel lain di dunia untuk mengejar ketinggalan :).

Contoh :

<a href="tel:+18475555555">1-847-555-5555</a>

s4y
sumber
Terima kasih atas jawaban terinci! Karena saya mengajukan pertanyaan, saya juga tergoda untuk mengikuti pendekatan ini. Gunakan standar dan beri tahu orang yang mengeluh, bahwa mereka menggunakan aplikasi / alat yang buruk. Meskipun sulit, jika yang ini adalah klien Anda, saya pikir, Anda benar. Namun jika saya harus mempertimbangkan pengguna Skype, saya akan pergi dengan solusi JavaScript saya sebaliknya.
Boldewyn
1
Ini 2014 dan Tel: sekarang berfungsi untuk Skype. Tetapi jika Anda ingin melakukan panggilan ke Skype Echo / Sound Test Service, tautannya adalah <a href="skype:echo123?call"> Hubungi Skype Echo / Sound Test Service </a> dari msdn.microsoft. com / en-us / library / office / ...
OzBob
4
Adakah yang mencoba href="tel://1-555-555-5555"format? orang-orang dari Tutsplus merekomendasikannya code.tutsplus.com/tutorials/…
Adrien Be
2
Dalam pengalaman saya dengan tel: tag Skype mengharuskan kode negara dengan tanda + berada di nomor (mis. "+44" untuk nomor UK) untuk menguraikan nomor dengan benar. Kalau tidak, itu hanya membuka Skype tetapi tidak mencoba melakukan panggilan.
ShaunUK
3
Bukankah seharusnya contohnya adalah: <a href="tel:+18475555555">? Perhatikan tanda + sebelum awal 1.)
Stéphane
73

Hasil tes saya:

telepon ke:

  • Browser Nokia: tidak ada yang terjadi
  • Google Chrome: meminta untuk menjalankan skype untuk memanggil nomor tersebut
  • Firefox: meminta untuk memilih program untuk memanggil nomor tersebut
  • IE: meminta untuk menjalankan skype untuk memanggil nomor tersebut

tel:

  • Browser Nokia: berfungsi
  • Google Chrome: tidak ada yang terjadi
  • Firefox: "Firefox tidak tahu cara membuka url ini"
  • IE: tidak dapat menemukan url
Murat
sumber
2
Untuk menambah ini, perilaku ini sama untuk Google Chrome di Android 4.2.2 (Nexus 4). Menjalankan versi Android Skype di latar belakang bahkan tidak membuat panggilan ke: tautan berfungsi. Singkatnya, Anda tidak dapat benar-benar menggunakan tautan callto: jika Anda ingin menargetkan ponsel saat ini.
aendrew
Sekarang di chrome 35 Anda mendapatkan popup
pec
Di chrome dan firefox (mungkin juga IE), Anda dapat mendaftarkan layanan web Anda untuk tel:awalan dengan registerProtocolHandler .
Ross Rogers
Anda harus menggunakan + nomor telepon countrycode yang berfungsi pada chrome. tel: tautan sepertinya tidak bekerja dengan skype di chrome w / o +
Stas Svishov
Pembaruan di OSX dan Chrome: ia meminta untuk meluncurkan Facetime.
Jules
45

Taruhan terbaik adalah memulai dengan tel: yang bekerja di semua ponsel

Kemudian masukkan kode ini, yang hanya akan berjalan ketika di desktop, dan hanya ketika sebuah tautan diklik.

Saya menggunakan http://detectmobilebrowsers.com/ untuk mendeteksi browser seluler, Anda dapat menggunakan metode apa pun yang Anda inginkan

if (!jQuery.browser.mobile) {
    jQuery('body').on('click', 'a[href^="tel:"]', function() {
            jQuery(this).attr('href', 
                jQuery(this).attr('href').replace(/^tel:/, 'callto:'));
    });
}

Jadi pada dasarnya Anda menutupi semua basis Anda.

tel: berfungsi pada semua ponsel untuk membuka dialer dengan nomor tersebut

callto: berfungsi di komputer Anda untuk terhubung ke skype dari firefox, chrome

mordy
sumber
Ya, ini - callto: tidak berfungsi sama sekali di Android (Lihat komentar saya pada jawaban Murat), dan tel: tidak benar-benar berfungsi di desktop. Sangat disayangkan, sungguh.
aendrew
1
Hmmm, sayangnya jsfiddle cepat sepertinya tidak membiarkan pekerjaan ini juga ... jsfiddle.net/tchalvakspam/gVZYt/3
Kzqai
Bekerja pada Seamonkey 2.20 pada Mac 10.8, letakkan di bawah <body <?php body_class(); ?>>kode pada file header.php tema wordpress.
om01
callto: tidak bekerja untuk chrome di mac dan versinya mutakhir
Ujjwal
Sayangnya ini telah disusutkan di JQuery 1.9 jquery.com/upgrade-guide/1.9/#jquery-browser-removed
Casebash
21

Seperti yang diharapkan, dukungan WebKit tel:meluas ke peramban seluler Android juga - FYI

rymo
sumber
15
Akan lebih baik sebagai komentar, tetapi baik untuk mengetahui pula.
o0 '.
10

Saya menyimpan jawaban ini untuk tujuan "bersejarah" tetapi tidak merekomendasikannya lagi. Lihat jawaban @Sidnicious 'di atas dan Pembaruan 2 saya.

Karena ini terlihat seperti imbang antara callto dan tel kawan, saya ingin memberikan solusi yang mungkin dengan harapan, bahwa komentar Anda akan membawa saya kembali ke jalan cahaya ;-)

Menggunakan callto:, karena sebagian besar klien desktop akan menanganinya:

<a href="callto:0123456789">call me</a>

Kemudian, jika klien adalah iPhone, ganti tautan:

window.onload = function () {
  if (navigator.userAgent.match (/iPhone/i)) {
    var a = document.getElementsByTagName ("a");
    for (var i = 0; i < a.length; i++) {
      if (a[i].getAttribute ('href').search (/callto:/i) === 0) {
        a[i].setAttribute ('href', a[i].getAttribute ('href').replace (/^callto:/, "tel:"));
      }
    }
  }
};

Adakah keberatan terhadap solusi ini? Haruskah saya mulai dari tel:?

Boldewyn
sumber
Bisa jadi iPhone juga mendukung skema callto, tetapi Apple lebih suka tel, jadi itulah yang disebutkan dalam dokumentasi.
Jan Aagaard
5
Lihat jawaban saya. callto:adalah skema URI berpemilik, jadi saya tidak akan mulai dari sana.
s4y
callto: tidak bekerja untuk chrome di mac dan versinya mutakhir.
Ujjwal
Itu tidak mengejutkan saya. Lansekapnya berbeda secara mendasar pada tahun 2009, ketika jawabannya diberikan. Juga, Anda memerlukan program pihak ketiga, yang mendaftar untuk callto:skema tersebut, seperti Skype. Chrome sendiri tidak tahu, apa yang harus dilakukan.
Boldewyn
9

Mobile Safari (iPhone & iPod Touch) menggunakan tel:skema ini.

Bagaimana cara memanggil nomor telepon dari halaman web di iPhone?

Jan Aagaard
sumber
2
Jadi jika pengguna sasaran utama adalah iPhone atau iPod Tough (dan mungkin perangkat seluler lainnya, saya tidak tahu ...), Anda harus menggunakan tel: Jika pengguna utama adalah klien web biasa, (yaitu, Firefox, dll.) menggunakan skype atau beberapa perangkat lunak VoIP lainnya, saya pikir callto: akan lebih baik.
awe
3

RFC3966 mendefinisikan URI standar IETF untuk nomor telepon, yaitu URI 'tel:'. Itu standarnya. Tidak ada standar serupa yang menentukan 'callto:', itu adalah konvensi khusus untuk Skype pada platform yang memungkinkan mendaftarkan penangan URI untuk mendukungnya.

Leroy Jenkins
sumber
Itulah yang dikatakan Sidnicious, ya.
Boldewyn
3

ini bekerja untuk saya:

1. buat tautan yang memenuhi standar:

        <a href="tel:1500100900">

2. ganti ketika browser seluler tidak terdeteksi, untuk skype:

$("a.phone")
    .each(function()
{ 
  this.href = this.href.replace(/^tel/, 
     "callto");
});

Memilih tautan untuk diganti melalui kelas tampaknya lebih efisien. Tentu saja itu hanya bekerja pada jangkar dengan .phonekelas.

Saya telah mengaktifkannya if( !isMobile() ) { ...sehingga hanya memicu ketika mendeteksi browser desktop. Tapi yang ini sudah usang ...

function isMobile() {
    return (
        ( navigator.userAgent.indexOf( "iPhone" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPod" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "iPad" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "Android" ) > -1 ) ||
        ( navigator.userAgent.indexOf( "webOS" ) > -1 )
    );
}
devein
sumber
Cara yang "tepat" untuk mendeteksi browser seluler adalah dengan memeriksa case string "mobile" yang tidak sensitif.
Kevin Cox
2

Saya menggunakan tel:untuk proyek saya.

Ini berfungsi di Chrome, Firefox, IE9 & 8, Chrome mobile dan Browser mobile di smartphone Sony Ericsson saya.

Tetapi callto:tidak berfungsi di Peramban seluler.

fuma
sumber
2

Saya akan menggunakan tel:(seperti yang disarankan). Tetapi untuk memiliki fallback yang lebih baik / tidak menampilkan halaman kesalahan saya akan menggunakan sesuatu seperti ini (menggunakan jquery):

// enhance tel-links
$("a[href^='tel:']").each(function() {
    var target = "call-" + this.href.replace(/[^a-z0-9]*/gi, "");
    var link = this;

    // load in iframe to supress potential errors when protocol is not available
    $("body").append("<iframe name=\"" + target + "\" style=\"display: none\"></iframe>");
    link.target = target;

    // replace tel with callto on desktop browsers for skype fallback
    if (!navigator.userAgent.match(/(mobile)/gi)) {
        link.href = link.href.replace(/^tel:/, "callto:");
    }
});

Asumsinya adalah, bahwa peramban seluler yang memiliki perangko seluler di string UserAgent memiliki dukungan untuk tel:protokol tersebut. Selebihnya kami mengganti tautan dengan callto:protokol untuk memiliki cadangan ke Skype jika tersedia.

Untuk menekan halaman kesalahan untuk protokol yang tidak didukung, tautan ditargetkan ke iframe tersembunyi baru.

Sayangnya sepertinya tidak mungkin untuk memeriksa, apakah url telah berhasil dimuat di iframe. Tampaknya tidak ada peristiwa kesalahan yang terjadi.

jonas_jonas
sumber
Penggunaan iframe tersembunyi yang bagus!
Boldewyn
1

Karena callto:per default didukung oleh skype (diatur dalam pengaturan Skype), dan yang lain juga mendukungnya, saya akan merekomendasikan menggunakan callto:daripada skype:.

perasaan kagum
sumber
3
Di sini saya setuju. Tapi secara keseluruhan sepertinya menjadi tel: vs callto :, dan itu tidak mudah.
Boldewyn
1

Meskipun Apple merekomendasikan tel:dalam dokumen mereka untuk Mobile Safari, saat ini (iOS 4.3) ia menerima callto:hal yang sama. Jadi saya sarankan menggunakan callto:di situs web umum karena berfungsi baik dengan Skype dan iPhone dan saya berharap itu akan berfungsi pada ponsel Android juga.

Pembaruan (Juni 2013)

Ini masih masalah memutuskan apa yang Anda inginkan untuk ditawarkan oleh halaman web Anda. Di situs web saya, saya memberikan keduanya tel:dan callto:tautan (yang disebut sebagai Skype) karena browser Desktop di Mac tidak melakukan apa pun dengan tel:tautan sementara ponsel Android tidak melakukan apa pun dengan callto:tautan. Bahkan Google Chrome dengan plugin Google Talk tidak menanggapi tel:tautan. Namun, saya lebih suka menawarkan kedua tautan di desktop jika ada orang yang kesulitan mendapatkan tel:tautan untuk bekerja di komputer mereka.

Jika desain situs menentukan bahwa saya hanya menyediakan satu tautan, saya akan menggunakan tel:tautan yang akan saya coba ubah callto:pada browser desktop.

Pro tua
sumber
1
browser stok dalam versi open-source terbaru dari Android "Ice Cream Sandwich" masih tampaknya hanya mendukung tel:; mengklik callto:tautan menghasilkan "Halaman web tidak tersedia"
rymo
0

Menggunakan jQuery, ganti semua nomor telepon AS di halaman dengan skema callto:atau yang sesuai tel:.

// create a hidden iframe to receive failed schemes
$('body').append('<iframe name="blackhole" style="display:none"></iframe>');

// decide which scheme to use
var scheme = (navigator.userAgent.match(/mobile/gi) ? 'tel:' : 'callto:');

// replace all on the page
$('article').each(function (i, article) {
    findAndReplaceDOMText(article, {
        find:/\b(\d\d\d-\d\d\d-\d\d\d\d)\b/g,
        replace:function (portion) {
            var a = document.createElement('a');
            a.className = 'telephone';
            a.href = scheme + portion.text.replace(/\D/g, '');
            a.textContent = portion.text;
            a.target = 'blackhole';
            return a;
        }
    });
});

Terima kasih kepada @jonas_jonas untuk idenya. Membutuhkan fungsi findAndReplaceDOMText yang luar biasa .

uskup
sumber
1
Solusi ini tidak ideal, karena menganalisis string agen pengguna dianggap praktik buruk. Pertimbangkan perangkat yang mendukung telURI tetapi tidak melaporkan dirinya sebagai perangkat seluler.
Arturo Torres Sánchez
-1

Saya menggunakan <a href="tel:+123456">12 34 56</a>markup normal dan membuat tautan itu tidak dapat diklik untuk pengguna desktop viapointer-events: none;

a[href^="tel:"] {
    text-decoration: none;
}
.no-touch a[href^="tel:"] {
    pointer-events: none;
    cursor: text;
}

untuk browser yang tidak mendukung event-pointer (IE <11), klik dapat dicegah dengan JavaScript (contohnya bergantung pada Modernizr dan jQuery):

if(!Modernizr.touch) {
    $(document).on('click', '[href^="tel:"]', function(e) {
        e.preventDefault();
        return false;
    });
}
Alex
sumber
1
Menggunakan Modernizr.touchyang merupakan dukungan Touch Event untuk menyimpulkan dukungan untuk tel:tidak dapat diandalkan.
Kasing
Bahkan Chrome yang berjalan pada desktop Windows melaporkan dirinya sebagai perangkat sentuh.
Arturo Torres Sánchez
Beberapa mesin kelas desktop memang mendukung tel: url. Sebagai contoh khusus Mac, FaceTime pada Mac adalah standar dan berfungsi dengan tel :, digunakan untuk menggunakan iPhone pengguna dengan Handoff / Continuity, jadi gunakan pointer-events: tidak ada yang menargetkan desktop mungkin tidak bijaksana untuk dilakukan lagi .
OxC0FFEE