1

我正在尝试在 Rails 6 上的表单中使用 JQuery Masked Input。但在我看来，资产中的application.js不起作用，我不确定。我使用以下命令通过 yarn 安装了插件：yarn add jquery-mask-plugin. 它作为依赖项包含在package.json中。

要进行设置，我去了app/assets/javascripts/application.js。这是文件：

//= require jquery
//= require jquery_ujs
//= require jquery-mask-plugin
//= require_tree .

$.jMaskGlobals.watchDataMask = true;

在app/javascript/packs/application.js我尝试导入 JQuery 和插件：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import 'inputmask';

现在以我的形式，这就是我尝试使用插件的方式：

<%= form.text_field :cpf, class:'form-control', 'data-mask': '999.999.999-99' %>

正如我之前所说，我不确定，但我认为问题在于资产中的application.js文件，因为我编写了一个console.log("test")命令只是为了查看它是否正在执行，而当服务器运行时，Web 控制台上什么也没有出现。

有人可以帮助我吗？

4

2 回答 2

2
  1. 纱线添加“jquery-mask-plugin”
  2. 在 app/javascript/packs/application.js

添加要求

require("jquery-mask-plugin")
  1. 在 app/javascript/packs/application.js

在底部添加行

$.jMaskGlobals.watchDataMask = true;

  1. 在 .html.erb 中

    = d.text_field：电话号码，自动完成：“电话号码”，类：“表单控件”，占位符：“03xx-xxxxxxx”，“数据掩码”：“0000-0000000”

或 在 html.erb

<%= d.text_field :phone_number, autocomplete: "phone Number", class: "form-control", placeholder: "03xx-xxxxxxx" , 'data-mask': '0000-0000000' %>
于 2020-09-09T10:56:53.720 回答
1

  1. 在app/javascript/packs/application.js

    $(document).on('turbolinks:load', function () {
  var im = new Inputmask('999.999.999-99');
  var selector = $('#person_document');
  im.mask(selector);
});

  2. yarn add inputmask

  3. 在app/javascript/packs/application.js

    require('inputmask');

  4. 在assets/javascript/application.js

    //= require jquery 
//= require jquery_ujs 
//= require jquery-mask-plugin 
//= require_tree .  
//= require jquery.inputmask.bundle.min
$.jMaskGlobals.watchDataMask = true;

  5. 在app/javascript/packs/application.js

    require('inputmask');

这为我解决了这个问题。

于 2020-07-19T15:51:39.043 回答