如何使用Hotwire和Stimulus自动格式化电话号码

你是否曾经遇到过在表单中输入电话号码时的困扰？电话号码通常很长，很难一眼看出是否格式正确。为了解决这个问题，我们通常会在电话号码中添加破折号（-）来增加可读性。虽然你可以手动添加破折号，但自动格式化电话号码会更加方便，因为它让你可以专注于确保电话号码的准确性。

在这篇文章中，我将向你展示如何使用Hotwire和Stimulus来实现电话号码的自动格式化，让你的用户在输入电话号码时不再需要担心格式问题。

开篇故事

首先，让我分享一个故事。在一个网站上，用户需要填写一个电话号码表单，但他们发现在没有破折号的情况下，很难分辨号码的正确性。这导致了一些输入错误，用户感到非常沮丧。为了解决这个问题，开发团队决定使用Hotwire和Stimulus来自动格式化电话号码，使用户的输入更加友好和准确。

环境

在开始之前，让我们了解一下我们将使用的开发环境：

• Rails 7.0.7
• Ruby 3.2.2

实现步骤

现在，让我们开始实现自动电话号码格式化的步骤。

步骤1：创建Stimulus Controller

首先，我们需要创建一个Stimulus controller，用于处理电话号码的自动格式化。在 app/javascript/controllers/phone_number_controller.js 文件中添加以下代码：

import { Controller } from '@hotwired/stimulus'
import { PhoneNumberUtil, PhoneNumberFormat } from 'google-libphonenumber'

// 连接到 data-controller="phone-number"
export default class extends Controller {
  format() {
    if (this.element.value.length > 1) {
      const phoneNumberUtil = PhoneNumberUtil.getInstance();
      const region = 'JP'; // 你的国家代码
      const number = phoneNumberUtil.parseAndKeepRawInput(this.element.value, region);
      this.element.value = phoneNumberUtil.format(number, PhoneNumberFormat.NATIONAL);
    }
  }
}

在这个代码中，我们引入了PhoneNumberUtil和PhoneNumberFormat，这是来自google-libphonenumber包的工具，用于解析和格式化电话号码。format方法将在每次输入时触发，以自动格式化电话号码。

步骤2：在表单中使用Stimulus Controller

接下来，在你的表单中的电话号码输入框（<input>元素）上添加Stimulus controller和action。例如：

= simple_form_for user do |f|
  = f.input :name
  = f.input :annual_income
  = f.input :phone_number, input_html: { 'data-controller': 'phone-number', 'data-action': 'input->phone-number#format' }
  = f.submit class: 'btn btn-primary'

在这个示例中，我们为电话号码输入框添加了 data-controller 和 data-action 属性，以指定Stimulus controller和它的action。每当用户在输入框中输入内容时，format方法将自动执行，格式化电话号码。

总结

通过使用Hotwire和Stimulus，你可以轻松实现电话号码的自动格式化，提高用户体验，减少输入错误的可能性。相比于传统的JavaScript事件监听方式，Stimulus使代码更加清晰、易于理解，同时让你可以在HTML中直观地查看事件和方法的关联关系。

希望这篇教程对你有所帮助，让你更加高效地处理表单中的电话号码输入。