Format phone number as mask with country code

by Petr Haluza

HTML

<form id="phone-form"> <div class="phone-field"> <select id="country-code"> <!-- V možnostech lze kromě textu využít data atributy a vlastní CSS pro zobrazení příslušných vlaječek --> <option value="+420" data-flag="cz">Česká republika (+420)</option> <option value="+421" data-flag="sk">Slovensko (+421)</option> <!-- Další možnosti dle potřeby --> </select> <input type="text" id="phone-number" placeholder="123 456 789" inputmode="numeric" autocomplete="off" /> </div> <button type="submit">Odeslat</button> </form>

CSS

.phone-field { display: flex; align-items: center; }
  .phone-field select {
    margin-right: 8px;
    /* Příklad: lze nastavit background-image pro zobrazení vlaječky */
    /* background-image: url('cz-flag.png'); */
    /* background-repeat: no-repeat;
       background-position: left center; */
  }
  
  .phone-field input {
    padding: 5px;
    font-size: 1rem;
    width: 150px;
  }

JavaScript

// Funkce, která odstraní všechny nesčíslice, omezí vstup na 9 číslic
  // a pomocí regulárního výrazu rozdělí číslo do skupin po třech číslicích
  function formatPhoneNumber(value) {
    // Odstraní vše, co není číslo
    let digits = value.replace(/\D/g, "");
    // Omezí řetězec pouze na 9 číslic
    digits = digits.slice(0, 9);
    // Rozdělí číslo do skupin po třech číslicích
    const groups = digits.match(/.{1,3}/g);
    return groups ? groups.join(" ") : "";
  }

  // Listener pro input event, který zajišťuje zadávání se zobrazenou maskou
  document.getElementById("phone-number").addEventListener("input", function (e) {
    const input = e.target;
    const raw = input.value;
    const formatted = formatPhoneNumber(raw);
    input.value = formatted;
    // Poznámka: Ošetření pozice kurzoru je možné řešit pokročileji,
    // zde se provádí jednoduchá reasignace formátované hodnoty.
  });

  // Listener pro odeslání formuláře – zde odstraníme mezery a případně zkombinujeme s předvolbou
  document.getElementById("phone-form").addEventListener("submit", function (e) {
    e.preventDefault(); // pro demonstraci zabráníme standardnímu odeslání formuláře

    const countryCode = document.getElementById("country-code").value;
    const phoneInput = document.getElementById("phone-number").value;
    // Odebere mezery, aby bylo číslo čisté
    const rawPhone = phoneInput.replace(/\s/g, "");
    // Lze kombinovat předvolbu a číslo, například:
    const fullNumber = countryCode + rawPhone;

    // Pro demonstraci zobrazíme výsledek:
    alert("Telefonní číslo k odeslání: " + fullNumber);

    // V reálném použití můžete následně odeslat data AJAXem nebo normálním odesláním form.
  });