JQuery 屏蔽输入在 Rails 6 中不起作用

Question

I am trying to use the JQuery Masked Input in my form on Rails 6. But it seems to me that the application.js in assets is not working, i am not sure. I installed the plugin through yarn with the command: yarn add jquery-mask-plugin . It was included in package.json as a dependency.

To setup, I went to app/assets/javascripts/application.js . This is the file:

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

$.jMaskGlobals.watchDataMask = true;

In app/javascript/packs/application.js I tried to import the JQuery and the plugin ass well:

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

Now in my form, this is how I tried to use the plugin:

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

As I said before, I am not sure, but I think the problem is the application.js file in assets, cause I wrote a console.log("test") command just to see if it is executing and nothing appeared at the web console when the server was running.

Can someone would help me?

Answer 1

1. yarn add "jquery-mask-plugin"
2. in app/javascript/packs/application.js

add require

require("jquery-mask-plugin")

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

add line at the buttom

$.jMaskGlobals.watchDataMask = true;

4. in .html.erb

   = d.text_field :phone_number, autocomplete: "phone Number", class: "form-control", placeholder: "03xx-xxxxxxx" , 'data-mask': '0000-0000000'

or in html.erb

<%= d.text_field :phone_number, autocomplete: "phone Number", class: "form-control", placeholder: "03xx-xxxxxxx" , 'data-mask': '0000-0000000' %>

Answer 2

1. in 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. in app/javascript/packs/application.js

    require('inputmask');

4. in assets/javascript/application.js

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

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

    require('inputmask');

This solved the problem for me.