Input mask for phone form field in rail view

Question

I have a customer contact form in my application, which, of course, requires entering the phone. I am running Rails 3.2.13 and using the Zurb Foundation. I hope to find a gem that offers an input mask in the form of "[phone]" that I can call. My data is really local, so US formatted numbers are all I need.

I can do a check in the box, but I want the users to be within the tighter boundaries of the input mask. This is what I have at the moment.

<div class="large-4 columns"><%= f.telephone_field :phone, :placeholder => "Phone - [phone]" %></div> 

Any great jewels for this, or maybe a jQuery plugin that you like?

Hooray!

-Edit So, here is the complete answer for what I needed to complete. Just in case, someone is looking for a quick solution. This is the code in a file of the form _form.html.erb:

 <div class="large-2 columns"> <%= f.text_field :phone, :id => "phone", :placeholder => "Primary Phone"%> </div> 

Here is the code in my coffee file in my resources / javascripts folder:

 $ -> $("#phone").mask("[phone]") 

You need to download the corresponding jquery.maskedinput.js file from the @vinodadhikary link below. Then you should require a file somewhere below the jquery file in the dependency list in the application.js file as follows:

 //= require jquery //= require jquery_ujs //= require foundation //= require jquery.maskedinput //= require_tree . 

What about that. If you notice something is amiss, please let me know and I will edit it.

Answer 1

I use the http://digitalbush.com/projects/masked-input-plugin plugin and it works very well.

I have many fields with different masks, so I use this method in my coffescript application.

  $( "[data-mask]").each (index, value) -> element = $(value) element.mask($(value).data('mask')) 

Now I can just set the data-mask attribute for any of my fields:

  <%= f.text_field(:phone, data: { mask: '[phone]' }) %> 

Hope this helps someone!