CodePen - Campo de entrada de número de teléfono

2,609 Andev.web

Abrir en el editor Publica tu código

CodePen - Campo de entrada de número de teléfono

Recomendado

15 June 2025

Un código de securearray494

13 July 2024

Plantilla de formulario de inicio de sesión más sencilla

10 December 2025

Inspirado por el fuego: Portafolio de desarrollador web (Tailwind CSS)

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="pn-select" id="js_pn-select" style="--prefix-length: 2">
  <button class="pn-selected-prefix" aria-label="Select phonenumber prefix" id="js_trigger-dropdown" tabindex="1">
    <img class="pn-selected-prefix__flag" id="js_selected-flag" src="https://flagpedia.net/data/flags/icon/36x27/nl.png" />
    <svg class="pn-selected-prefix__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#081626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="6 9 12 15 18 9" />
    </svg>
  </button>
  <div class="pn-input">
    <label class="pn-input__label">Phonenumber*</label>
    <div class="pn-input__container">
      <input class="pn-input__prefix" value="+31" type="text" name="phonenumber-prefix" id="js_number-prefix" tabindex="-1" />
      <input class="pn-input__phonenumber" id="js_input-phonenumber" type="tel" name="phonenumber" pattern="\d*" value="" placeholder=" " autocomplete="nope" required max="10" tabindex="0" />
      <small class="pn-input__error">
        This is not a valid phone number
      </small>
    </div>
  </div>
  <div class="pn-dropdown" id="js_dropdown">
    <div class="pn-search">
      <svg class="pn-search__icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#103155" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
      <input placeholder="Search for countries" class="pn-search__input search" type="search" id="js_search-input" autocomplete="nope" />
    </div>
    <ul class="pn-list list" id="js_list"></ul>
    <div class="pn-list-item pn-list-item--no-results" style="display: none" id="js_no-results-found">
      No results found
    </div>
  </div>
</div>

</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
html {
  box-sizing: border-box;
  height: 100%;
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #efefef;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 1em;
  color: #081627;
}

input[type=search],
input[type=tel],
input[type=text] {
  font-size: 1rem;
  border: 0;
  font-family: inherit;
  outline: none;
  color: inherit;
  margin: 0;
  padding: 0;
  width: auto;
  max-width: 100%;
}
input[type=search]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=text]::-webkit-input-placeholder {
  font-weight: 300;
  color: #6b7280;
}
input[type=search]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=text]::-moz-placeholder {
  font-weight: 300;
  color: #6b7280;
}
input[type=search]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder {
  font-weight: 300;
  color: #6b7280;
}
input[type=search]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=text]:-moz-placeholder {
  font-weight: 300;
  color: #6b7280;
}

:root {
  --border-radius: 0.75em;
  --border-color: #c3c3c3;
  --border-color-active: #0047a5;
  --dropdown-border-color: #eaeaec;
  --dropdown-trigger-background-color: #f3f5f9;
  --dropdown-trigger-hover-background-color: #e6eaf1;
  --input-error-color: #ff0000;
  --input-label-color: #85898f;
  --input-prefix-color: #656b73;
  --input-phonenumber-color: #081627;
  --list-item-hover-background: #f3f5f9;
}

.pn-select {
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-color);
  display: grid;
  grid-template-columns: 4.5em 1fr;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease-out;
  max-width: 20em;
  width: 100%;
  z-index: 1;
}
.pn-select:focus, .pn-select:focus-within {
  border-color: var(--border-color-active);
  box-shadow: 0 0 2px 0 var(--border-color-active);
}

.pn-dropdown {
  background: #ffffff;
  border-radius: var(--border-radius);
  border-width: 1px;
  border-style: solid;
  border-color: var(--dropdown-border-color);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.135);
  opacity: 0;
  padding: 0 0.5em 0.5em;
  pointer-events: none;
  position: absolute;
  top: 140%;
  transform-origin: left top;
  transition: all 0.15s ease-out;
  width: 100%;
  visibility: hidden;
}
.pn-select--open .pn-dropdown {
  pointer-events: all;
  transform: none;
  opacity: 1;
  top: 120%;
  visibility: visible;
}

.pn-search {
  position: relative;
  display: flex;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: var(--dropdown-border-color);
  margin-bottom: 0.5em;
}
.pn-search svg {
  display: block;
  height: 1.25rem;
  left: 0.5em;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
}
.pn-search input[type=search] {
  padding-left: 2.5rem;
  height: 3rem;
  width: 100%;
}
.pn-search input[type=search]::-webkit-search-decoration, .pn-search input[type=search]::-webkit-search-cancel-button, .pn-search input[type=search]::-webkit-search-results-button, .pn-search input[type=search]::-webkit-search-results-decoration {
  display: none;
}

.pn-list {
  margin-right: -0.5em;
  max-height: 10.5em;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ffffff #ffffff;
  position: relative;
}
.pn-list::-webkit-scrollbar {
  width: 10px;
}
.pn-list:hover {
  --scrollbar-background: #ffffff;
  --thumb-background: #c0c4ca;
  scrollbar-color: var(--thumb-background) var(--scrollbar-background);
}
.pn-list:hover::-webkit-scrollbar-track {
  background: var(--scrollbar-background);
}
.pn-list:hover::-webkit-scrollbar-thumb {
  background-color: var(--thumb-background);
  border-radius: 6px;
  border: 3px solid var(--scrollbar-background);
}
.pn-list--no-scroll {
  margin-right: 0;
}

.pn-selected-prefix {
  align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: var(--dropdown-trigger-background-color);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  border: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0;
  outline: none;
  padding: 0;
  transition: background 0.2s ease-out;
}
.pn-selected-prefix:hover, .pn-selected-prefix:focus {
  background: var(--dropdown-trigger-hover-background-color);
}
.pn-selected-prefix__flag {
  height: auto;
  width: 1.25rem;
}
.pn-selected-prefix__icon {
  display: block;
  height: 1.25rem;
  margin-left: 0.5em;
  margin-right: -0.25em;
  transition: all 0.15s ease-out;
  width: 1.25rem;
}
.pn-select--open .pn-selected-prefix__icon {
  transform: rotate(180deg);
}

.pn-input {
  background: #ffffff;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  line-height: 1;
  overflow: hidden;
  padding: 0.5em 1em;
}
.pn-input__container {
  display: flex;
  flex-direction: row;
}
.pn-input__label {
  color: var(--input-label-color);
  font-size: 0.7rem;
  position: relative;
  top: -0.25em;
}
.pn-input__error {
  bottom: 0;
  color: var(--input-error-color);
  font-size: 0.785rem;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: all 0.2s ease-out;
  z-index: -1;
}
.pn-input input[type=text] {
  background: transparent;
  position: absolute;
  color: var(--input-prefix-color);
  max-width: 3rem;
  pointer-events: none;
}
.pn-input input[type=tel] {
  color: var(--input-phonenumber-color);
  padding-left: calc(calc(var(--prefix-length) * 1ch) + 1.5ch);
  font-weight: 500;
}
.pn-input input[type=tel]:not(:-moz-placeholder-shown):invalid + .pn-input__error {
  opacity: 1;
  transform: translateY(175%);
}
.pn-input input[type=tel]:not(:-ms-input-placeholder):invalid + .pn-input__error {
  opacity: 1;
  transform: translateY(175%);
}
.pn-input input[type=tel]:not(:placeholder-shown):invalid + .pn-input__error {
  opacity: 1;
  transform: translateY(175%);
}

.pn-list-item {
  align-items: center;
  border-radius: 0.5em;
  display: flex;
  font-weight: 400;
  padding: 0.6em 0.75em;
  transition: background-color 0.2s ease-out;
  cursor: pointer;
  outline: none;
}
.pn-list-item__flag {
  width: 1.25em;
  height: auto;
  margin-right: 1em;
  display: block;
}
.pn-list-item__country {
  margin-right: 0.25em;
}
.pn-list-item:hover, .pn-list-item:focus {
  background-color: var(--list-item-hover-background);
}
.pn-list-item--selected {
  pointer-events: none;
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23103155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: right 0.75em top 50%;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  background-position: right 0.75em top 50%;
}
.pn-list-item--no-results {
  pointer-events: none;
}

.dribble-creds {
  bottom: 2em;
  font-size: 0.875rem;
  left: 0;
  position: fixed;
  right: 0;
  text-align: center;
}
.dribble-creds a {
  color: #ea4c89;
  text-decoration: underline;
}

const selectContainer = document.getElementById("js_pn-select");
const countrySearchInput = document.getElementById("js_search-input");
const noResultListItem = document.getElementById("js_no-results-found");
const dropdownTrigger = document.getElementById("js_trigger-dropdown");
const phoneNumberInput = document.getElementById("js_input-phonenumber");
const dropdownContainer = document.getElementById("js_dropdown");
const selectedPrefix = document.getElementById("js_number-prefix");
const selectedFlag = document.getElementById("js_selected-flag");
const listContainer = document.getElementById("js_list");

let countryList;

const init = async countries => {
  const selectCountry = e => {
    const { flag, prefix } = e.target.closest("li").dataset;
    setNewSelected(prefix, flag);
    closeDropdown();
    addSelectedModifier(flag);
  };

// -------------- Update the 'Selected country flag' to reflect changes

// -------------- Removes and adds modifier to selected country

const addSelectedModifier = flag => {
    const previousSelected = document.getElementsByClassName(
    "pn-list-item--selected")[
    0];
    const newSelected = document.querySelectorAll(
    `.pn-list-item[data-flag=${flag}]`)[
    0];
    previousSelected.classList.remove("pn-list-item--selected");
    newSelected.classList.add("pn-list-item--selected");
  };

// -------------- Close dropdown

const closeDropdown = () => {
    selectContainer.classList.remove("pn-select--open");
    listContainer.scrollTop = 0;
    countrySearchInput.value = "";
    countryList.search();
    phoneNumberInput.focus();
    removeDropdownEvents();
  };

// -------------- Open dropdown

const openDropdown = () => {
    selectContainer.classList.add("pn-select--open");
    attatchDropdownEvents();
  };

// -------------- Dropdown event listeners

let countdown;

const closeOnMouseLeave = () => {
    // console.log("countdown activated");
    countdown = setTimeout(() => closeDropdown(), 2000);
  };

const clearTimeOut = () => clearTimeout(countdown);

const attatchDropdownEvents = () => {
    // console.log("Adding event listeners");
    dropdownContainer.addEventListener("mouseleave", closeOnMouseLeave);
    dropdownContainer.addEventListener("mouseenter", clearTimeOut);
  };

const removeDropdownEvents = () => {
    // console.log("Removing event listeners and countdown");
    clearTimeout(countdown);
    dropdownContainer.removeEventListener("mouseleave", closeOnMouseLeave);
    dropdownContainer.removeEventListener("mouseenter", clearTimeOut);
  };

// -------------- Close when clicked outside the dropdown

document.addEventListener("click", e => {
    if (
    e.target !== selectContainer &&
    !selectContainer.contains(e.target) &&
    selectContainer.classList.contains("pn-select--open"))
    {
      closeDropdown();
    }
  });

// -------------- Append generated listItems to list element

const createList = () =>
  new Promise((resolve, _) => {
    countries.forEach((country, index, countries) => {
      const { name, prefix, flag } = country;

const element = `<li class="pn-list-item ${
      flag === "nl" ? "pn-list-item--selected" : ""
      } js_pn-list-item" data-flag="${flag}" data-prefix="${prefix}" tabindex="0" role="button" aria-pressed="false">
          <img class="pn-list-item__flag" src="https://flagpedia.net/data/flags/icon/36x27/${flag}.png" />
          <span class="pn-list-item__country js_country-name">${name}</span>
          <span class="pn-list-item__prefix js_country-prefix">(+${prefix})</span>
        </li>`;

listContainer.innerHTML += element;

if (index === countries.length - 1) {
        resolve();
      }
    });
  });

// -------------- After all the listItems are created we loop over the items to attach the eventListeners

const attatchListItemEventListeners = () =>
  new Promise((resolve, _) => {
    const listItems = [...document.getElementsByClassName("js_pn-list-item")];

listItems.forEach((item, index, listItems) => {
      item.addEventListener("click", event => {
        selectCountry(event);
      });
      // Keydown event listener - https://dev.to/tylerjdev/when-role-button-is-not-enough-dac
      item.addEventListener("keydown", function (e) {
        const keyD = e.key !== undefined ? e.key : e.keyCode;
        if (
        keyD === "Enter" ||
        keyD === 13 ||
        ["Spacebar", " "].indexOf(keyD) >= 0 ||
        keyD === 32)
        {
          e.preventDefault();
          this.click();
        }
      });

if (index === listItems.length - 1) {
        resolve();
      }
    });
  });

// -------------- After all the listItems are created we initate list and it's listeners

const initiateList = () => {
    countryList = new List("js_pn-select", {
      valueNames: ["js_country-name", "js_country-prefix"] });

// Add 'updated' listener for search results
    countryList.on("updated", list => {
      if (list.matchingItems.length < 5)
      listContainer.classList.toggle("pn-list--no-scroll");

noResultListItem.style.display =
      list.matchingItems.length > 0 ? "none" : "block";
    });
  };

await createList();
  await attatchListItemEventListeners();
  initiateList();

dropdownTrigger.addEventListener("click", () => {
    const isOpen = selectContainer.classList.contains("pn-select--open");
    isOpen ? closeDropdown() : openDropdown();
  });
};

const countries = [
{
  name: "Austria",
  prefix: 43,
  flag: "at" },

{
  name: "Belgium",
  prefix: 32,
  flag: "be" },

{
  name: "Bulgaria",
  prefix: 359,
  flag: "bg" },

{
  name: "Croatia",
  prefix: 385,
  flag: "hr" },

{
  name: "Cyprus",
  prefix: 357,
  flag: "cy" },

{
  name: "Czech Republic",
  prefix: 420,
  flag: "cz" },

{
  name: "Denmark",
  prefix: 45,
  flag: "dk" },

{
  name: "Estonia",
  prefix: 372,
  flag: "ee" },

{
  name: "Finland",
  prefix: 358,
  flag: "fi" },

{
  name: "France",
  prefix: 33,
  flag: "fr" },

{
  name: "Germany",
  prefix: 49,
  flag: "de" },

{
  name: "Greece",
  prefix: 30,
  flag: "gr" },

{
  name: "Hungary",
  prefix: 36,
  flag: "hu" },

{
  name: "Iceland",
  prefix: 354,
  flag: "is" },

{
  name: "Republic of Ireland",
  prefix: 353,
  flag: "ie" },

{
  name: "Italy",
  prefix: 39,
  flag: "it" },

{
  name: "Latvia",
  prefix: 371,
  flag: "lv" },

{
  name: "Liechtenstein",
  prefix: 423,
  flag: "li" },

{
  name: "Lithuania",
  prefix: 370,
  flag: "lt" },

{
  name: "Luxembourg",
  prefix: 352,
  flag: "lu" },

{
  name: "Malta",
  prefix: 356,
  flag: "mt" },

{
  name: "Netherlands",
  prefix: 31,
  flag: "nl" },

{
  name: "Norway",
  prefix: 47,
  flag: "no" },

{
  name: "Poland",
  prefix: 48,
  flag: "pl" },

{
  name: "Portugal",
  prefix: 351,
  flag: "pt" },

{
  name: "Romania",
  prefix: 40,
  flag: "ro" },

{
  name: "Slovakia",
  prefix: 421,
  flag: "sk" },

{
  name: "Slovenia",
  prefix: 386,
  flag: "si" },

{
  name: "Spain",
  prefix: 34,
  flag: "es" },

{
  name: "Sweden",
  prefix: 46,
  flag: "se" }];

init(countries);