Nedávno jsem potřeboval dát na web telefonní čísla. Napsat příslušný tag nevyžaduje takřka žádnou duševní činnost, ale je tam jedna menší zrada. Říkal jsem si, taková trivialita, nebudu ani zapínat mozek a rovnou to vygůglím. Ale ouha, nevygůglil jsem.
Pokud to neznáte, o telefonních číslech je pěkný článek https://www.vzhurudolu.cz/blog/57-href-tel a na konci Martin Michálek ve videjku zmiňuje problém s tagem <a href="tel:+420123456789">123 456 789</a>, o který mi šlo. Když totiž na ten odkaz uživatel klikne na desktopu, vyprodukuje takový ošklivý, nepěknou věc:
Řešit se to dá JavaScriptem, nějaké řešení je už v tom videjku, ale nic, co bych mohl prostě jen zkopírovat. Takže jsem nelenil (mozek stále ještě vypnutý) a zapátral jsem v hlubinách internetů po hotovém řešení. A co se nestalo, vypadly na mě akorát nesmysly a polovičatosti.
No dobrá, tak jsem to sflikoval do použitelného stavu – a protože na cílovém webu není žádný JS framework, je to ve „vanilla JS“:
window.addEventListener('DOMContentLoaded', () => {
initPhoneLinks();
});
/**
* On desktop, remove phone number links
*/
function initPhoneLinks() {
let isDesktop = !((/iphone|android|ie|blackberry|fennec/).test(navigator.userAgent.toLowerCase()) && 'ontouchstart' in document.documentElement);
if ( isDesktop ) {
let linkElements = document.querySelectorAll("a[href^='tel']");
for (let elm of linkElements) {
elm.removeAttribute('href');
}
}
}Pokud někdy budete řešit to samé a vzpomenete si, třeba vám to ušetří 5 minut práce…