在Rails与Hotwire Stimulus中集成imaskjs失效问题求助

问题诊断 #

你的代码存在两个核心问题导致掩码失效：

1. Target名称不匹配：页面输入框的data-currency-target="gross"，与控制器中声明的static targets = ["currency"]名称不一致，Stimulus无法定位到目标元素。
2. Number输入框兼容性限制：number_field生成的<input type="number">会强制原生数字输入规则，与imask的掩码逻辑冲突，导致格式无法正常应用。

修复方案 #

1. 调整页面代码 #

替换number_field为text_field避免原生输入限制，同时统一target名称以支持多输入框：

<div class='' data-controller="currency">
  <%= f.label :gross_revenue %>
  <%= f.text_field :gross_revenue, class: '', data: { currency_target: "input" } %>

  <%= f.label :operating_cost %>
  <%= f.text_field :operating_cost, class: '', data: { currency_target: "input" } %>
</div>

2. 修正Stimulus控制器 #

更新target匹配规则，循环处理多输入框，完善imask配置确保显示与提交逻辑正常：

import { Controller } from "@hotwired/stimulus"
import IMask from "imask"

export default class extends Controller {
  static targets = ["input"]

  connect() {
    this.masks = []
    this.inputTargets.forEach(input => {
      // 初始化格式化已有数值
      if (input.value) {
        input.value = this.formatNumber(input.value)
      }

      const mask = IMask(input, {
        mask: Number,
        thousandsSeparator: ',',
        radix: '.',
        mapToRadix: ['.', ','], // 兼容两种小数点输入
        scale: 2, // 保留2位小数，可按需调整
        // 提交前自动移除千分位逗号
        prepare: (value) => value.replace(/,/g, '')
      })
      this.masks.push(mask)
    })
  }

  disconnect() {
    this.masks.forEach(mask => mask?.destroy())
  }

  // 辅助方法：将数字转为带千分位的字符串
  formatNumber(num) {
    return parseFloat(num).toLocaleString('en-US', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })
  }
}

3. 可选：表单提交校验 #

若需确保提交值为纯数字，可添加提交事件处理（需给表单加上data-action="currency#handleSubmit"）：

handleSubmit() {
  this.inputTargets.forEach(input => {
    input.value = input.value.replace(/,/g, '')
    input.value = input.value || '0' // 空值设为0
  })
}

关键说明 #

• 用text_field替代number_field可避免原生输入框与imask的逻辑冲突
• 循环处理inputTargets可同时为多个输入框应用掩码，满足你处理两类数据的需求
• 配置中的prepare方法或提交处理，确保后端能接收到正确的纯数字格式值

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