Phone Number Input — Free HTML CSS JS Snippet

Collecting phone numbers in web forms is deceptively complex. A plain <input type="tel"> accepts any text, has no formatting, shows no country code, and gives users zero feedback on whether their number is valid. This snippet provides a complete, production-ready phone number input: a flag + dial code selector button on the left, a searchable country dropdown with 20+ countries, a live auto-formatting mask that reshapes digits as the user types, a validation indicator that turns green when the number reaches the correct length, a live international number preview below the field, and a one-click copy button — all in plain HTML, CSS, and vanilla JavaScript with zero dependencies.

Country data model and format patterns

Each country in the countries array has six fields: code (ISO 3166-1 alpha-2), name, dial (E.164 prefix like "+44"), flag (flag emoji rendered natively by the OS), pattern (a mask string using # as digit placeholders, e.g. "(###) ###-####" for US), and maxLen (the exact digit count for a valid number in that country, excluding the country code). This separation of the mask from the validation length makes it easy to add more countries: just append an entry to the array.

The formatPhone mask engine

formatPhone(digits, pattern) works by iterating through the pattern string character by character. Each # character is replaced with the next available digit from the stripped input. Non-# characters (spaces, dashes, parentheses) are kept as literal separators. A trailing .replace() strips any separator characters left dangling at the end when the user has only typed a few digits — this keeps the field clean during partial entry. The function is called on every keystroke via handleInput(), which first strips all non-digit characters and enforces the maxLen ceiling before passing digits to the formatter.

Validation indicator

The validate(digits) function compares digits.length to selectedCountry.maxLen. An exact match shows ✅; any non-empty but shorter count shows ❌. The status icon sits inside the input row on the right, so the visual signal is always visible without disrupting the layout. Because maxLen changes when the country changes, validation automatically recalibrates when the user switches country — a common oversight in hand-rolled phone inputs.

Searchable country dropdown

The dropdown includes a search input that filters the country list in real time via filterCountries(query). The filter checks all three searchable axes: country name (so "United" matches US and UK), dial code (so "44" or "+44" matches UK), and ISO country code (so "DE" matches Germany). Results rerender immediately into the scrollable country-list container via renderList(). The container has max-height: 220px and overflow-y: auto with a slim custom scrollbar. The currently selected country gets a tinted .selected background on every render so the user always knows their active selection.

International number preview and copy

Below the input, the full E.164-style international number is assembled in real time: dial code + a space-separated version of the raw digits. This gives users confidence they have entered the right number for cross-border use. The copy button uses the navigator.clipboard.writeText() API to write the number without spaces (clean E.164 format). After copying, the button label changes to "Copied!" for 1.8 seconds before resetting — the standard micro-interaction for clipboard feedback.

Click-outside close and accessibility

A single document click listener checks e.target.closest('#phone-wrap'). Any click outside the component calls closeDropdown(). The country trigger button has aria-haspopup="listbox" and aria-expanded toggling with the open state. The dropdown has role="listbox" and each country item has role="option" with aria-selected. The search input receives focus automatically when the dropdown opens so keyboard users can immediately type to filter.