javascript 添加imaskjs与铁路和热线刺激，但它不工作

sbdsn5lh 于 2023-02-28 发布在 Java

关注(0)|答案(2)|浏览(95)

我正在尝试让刺激控制器屏蔽2个输入字段，“总收入”和“运营成本”在两个字段上显示千位分隔符。我已经尝试了imaskjs与刺激js，但我不知道为什么它根本不工作。

<div class='' data-controller="currency">

    <%= f.label :gross_revenue %>

    <%= f.number_field :gross_revenue, class: '', data: { currency_target: "gross" } %>

  </div>

下面是我的控制器

import { Controller } from "@hotwired/stimulus"

import IMask from "imask"

// data-controller="currency"

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

  connect() {

    this.mask = IMask(this.currencyTarget, { 
      mask: Number,
      thousandsSeparator: ',',
    });

  }

  disconnect() {

    this.mask?.destroy();

  }

}

JavaScript

来源：https://stackoverflow.com/questions/75575713/add-imaskjs-with-rails-and-hotwire-stimulus-but-it-doesnt-work

2条答案

按热度按时间

y53ybaqx1#

不能使用number字段：

- 请注意**

如果您将掩码应用于输入元素，则必须使用type="text"。不支持其他类型。

一个月一次 *

<div data-controller="currency">
  <%= f.text_field :gross_revenue, data: { currency_target: "gross" } %>
  <!-- NOTE: target name is "gross"                          ^^^^^ -->
</div>

修复目标名称（您还应该将其重命名为更通用的名称）：

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

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

  connect() {
    this.mask = IMask(this.grossTarget, {
      mask: Number,
      thousandsSeparator: ",",
    });
  }
}

您也可以只使用控制器元素：
一个二个一个一个

赞(0）回复(0）举报 2023-02-28

9avjhtql2#

亚历克斯的答案是最好的！
如果您在尝试保存屏蔽值时遇到问题，您还可以将下面的代码放入{model}.rb（我假设我们仍然使用Rails 7和：gross_revenue field/ column）

def gross_revenue=(val)
   write_attribute :gross_revenue, val.to_s.gsub(/\D/, '').to_i
end

CMIIW，但希望这有帮助！

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 添加imaskjs与铁路和热线刺激，但它不工作

2条答案

相关问题

热门标签

最新问答