Маска ввода для поля формы телефона в режиме просмотра рельсов

Question

У меня есть контактная форма для клиентов в моем приложении, которая, конечно же, требует ввода телефона. Я запускаю Rails 3.2.13 и используя Zurb Foundation. Я надеюсь найти драгоценный камень, который предлагает входную маску в форме «(999) 999-9999», которую я могу позвонить. Мои данные действительно локальны, поэтому форматированные номера в США - все, что мне нужно.

Я могу выполнить проверку на поле, но хотел, чтобы пользователи находились в более жестких границах маски ввода. Это то, что у меня есть на данный момент.

<div class="large-4 columns"><%= f.telephone_field :phone, :placeholder => "Phone - (123) 456-7890" %></div> 

Любые большие камни для этого, или, возможно, JQuery плагин, который вам нравится?

Cheers!

-Edit Итак, вот полный ответ за то, что мне нужно было выполнить. На всякий случай кто-то ищет быстрое решение. Это код в моем _form.html.erb просмотра файла:

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

Вот код в моем файле кофе в моей папке активов/JavaScripts:

$ -> 
    $("#phone").mask("(999) 999-9999") 

Вам необходимо скачать соответствующий JQuery .maskedinput.js файл из ссылки @vinodadhikary упоминается ниже. Затем вы должны требовать файла где-то ниже файл Jquery в списке зависимостей в вашем application.js файл следующим образом:

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

Вот об этом. Если вы заметили что-нибудь неладное, сообщите мне, и я отредактирую.

Answer 1

Я использую плагин http://digitalbush.com/projects/masked-input-plugin, и он работает очень хорошо.

У меня есть много полей с различными масками, поэтому я использую этот метод в своем приложении coffescript.

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

Теперь я могу просто установить атрибут data-mask на любом из моих полого ::

 <%= f.text_field(:phone, data: { mask: '(999) 999-9999' }) %> 

Я надеюсь, что это поможет кому-то!