基于Polymer的国际化电话号码输入组件需求

Hey there, I totally get your frustration here—you want a Web Components-based phone input that handles country selection, automatic number formatting, and area code support, but the existing Polymer options fall short, and you don’t want to drag in jQuery just for that one tool. Let’s break down some solid, jQuery-free solutions that fit your needs:

1. Roll Your Own with a Lightweight Number Handling Library #

You can easily build a custom Web Component using libphonenumber-js—a dependency-free library that handles phone number parsing, formatting, and country code matching perfectly. It’s the same engine used by intl-tel-input, minus the jQuery requirement.

Core Implementation Idea: #

• Add a country selection dropdown inside your component (you can dynamically populate it with country data from libphonenumber-js, including flags if you want)
• Listen for country selection changes to sync the corresponding area code
• Auto-format the input value in real-time using the library’s formatting methods
• Add support for pre-filled phone numbers by parsing the input and auto-selecting the matching country

Here’s a simplified example to get you started:

class CustomPhoneInput extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // Lazy-load the number handling library
    import('libphonenumber-js').then(({ parsePhoneNumber, formatNumber, getCountries }) => {
      this.parsePhoneNumber = parsePhoneNumber;
      this.formatNumber = formatNumber;
      this.populateCountrySelect(getCountries());
    });
    this.renderBaseUI();
  }

  renderBaseUI() {
    this.shadowRoot.innerHTML = `
      <style>
        .phone-container { display: flex; gap: 8px; }
        select, input { padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
      </style>
      <div class="phone-container">
        <select id="country-picker"></select>
        <input type="tel" id="phone-field" placeholder="Enter phone number">
      </div>
    `;
    this.setupEventListeners();
  }

  populateCountrySelect(countryCodes) {
    const select = this.shadowRoot.getElementById('country-picker');
    countryCodes.forEach(code => {
      const country = new Intl.DisplayNames(['en'], { type: 'region' }).of(code);
      const option = document.createElement('option');
      option.value = code;
      option.textContent = `${country} (+${new Intl.NumberFormat('en-US', { style: 'currency', currency: code }).format(0).replace(/\D/g, '')})`;
      select.appendChild(option);
    });
  }

  setupEventListeners() {
    const picker = this.shadowRoot.getElementById('country-picker');
    const field = this.shadowRoot.getElementById('phone-field');

    picker.addEventListener('change', () => this.formatInput());
    field.addEventListener('input', () => this.formatInput());
  }

  formatInput() {
    if (!this.parsePhoneNumber) return;
    const countryCode = this.shadowRoot.getElementById('country-picker').value;
    const rawValue = this.shadowRoot.getElementById('phone-field').value.replace(/\D/g, '');
    
    try {
      const number = this.parsePhoneNumber(rawValue, countryCode);
      this.shadowRoot.getElementById('phone-field').value = this.formatNumber(number, 'INTERNATIONAL');
    } catch (err) {
      // Handle invalid number input gracefully
    }
  }

  // Add support for pre-setting a phone number
  set prefilledNumber(value) {
    if (!this.parsePhoneNumber) return;
    try {
      const number = this.parsePhoneNumber(value);
      this.shadowRoot.getElementById('country-picker').value = number.country;
      this.shadowRoot.getElementById('phone-field').value = this.formatNumber(number, 'INTERNATIONAL');
    } catch (err) {
      console.error('Failed to parse prefilled number:', err);
    }
  }
}

customElements.define('custom-phone-input', CustomPhoneInput);

2. Use a Ready-Made Web Component #

If you don’t want to build from scratch, there are solid off-the-shelf options that fit your requirements:

• lion-phone-input: Part of the Lion Web Components library, this is a fully accessible, native Web Component with built-in country selection, auto-formatting, and area code support—no external dependencies needed.
• Community-maintained intl-tel-input Web Component: Some developers have stripped the jQuery dependency from intl-tel-input and wrapped it into a standard Web Component, preserving all its core features without the bloat.

3. Patch Your Existing Polymer Stack #

If you prefer sticking with Polymer tools, you can extend the paper-countries + gold-phone-number combo to add area code support:

• Listen for paper-countries selection events to fetch the corresponding area code
• Inject the area code as a prefix into gold-phone-number
• Override gold-phone-number’s formatting logic to match the selected country’s number pattern

Final Recommendation #

For the most flexibility and control, go with the custom component using libphonenumber-js—it’s lightweight, fully customizable, and avoids any unnecessary dependencies. If you want a quick drop-in solution, lion-phone-input is a polished, production-ready choice.

内容的提问来源于stack exchange，提问作者Merc