Rails 管理员输入掩码 [Rails 6]

Question

I need some inputs to have masks. Example: the phone field should be something like "(xxx) xxxxx-xxxx"

How can I include these "()" and "-" with masks.

My aplication uses Rails-Admin, and I tried to add some js and doesn't work when I acces ' /admin '

Answer 1

You will need to use a custom plugin for this i recommend inputmask for jQuery because rails admin already includes jQuery.

Then you can include the library inputmask.js on

app/assets/javascripts/rails_admin/custom/inputmask.js

And the bindings for automasking on

app/assets/javascripts/rails_admin/custom/inputmask.binding.js

And then add this file on your project

app/assets/javascripts/rails_admin/custom/ui.js

With this content

//= require_tree .
//= require 'rails_admin/custom/inputmask.js'
//= require 'rails_admin/custom/inputmask.binding.js'

Then is just a matter of configuring the field with the mask as the documentation of inputmask.js suggests something like this

  rails_admin do
    edit do
      field :phone do
        html_attributes do
          {
            'data-inputmask' => "'mask': '(999) - 99999-9999'"
          }
        end
      end
    end

I tried it on my project in it looks like this

Screenshot of field with custom mask

Answer 2

Struggled with this for a while as well, but this procedure finally worked:

1. Get the latest recommended version of this gem here and add to Gemfile: https://rubygems.org/gems/jquery-mask-plugin

2. Run bundle in terminal

3. Restart rails server

4. Add these lines (exactly as they are):

//= require jquery.inputmask

//= require jquery.inputmask.extensions

//= require jquery.inputmask.numeric.extensions

//= require jquery.inputmask.date.extensions

..in this folder in your project: app/assets/javascripts/application.js

5. Follow the instruction in the gem documentations for the method that suits you best: https://github.com/RobinHerbots/Inputmask (I used the jquery plugin)