在导轨视图中用于手机窗体字段的输入掩码

Question

我在我的应用中有一个客户联系表单，当然这需要电话输入。我正在运行Rails 3.2.13并使用Zurb基金会。我希望能找到一个能够以'[phone]'的形式提供输入掩码的宝石，我可以打电话。我的数据真的是本地的，因此美国格式化的数字就是我所需要的。

我能够在现场执行验证，但希望将用户保持在输入掩码的更紧密边界内。这是我目前所拥有的。

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

这个任何伟大的宝石，或者你喜欢的jQuery插件？

干杯！

-Edit 所以这里是我需要完成的全部答案。以防万一任何人正在寻找一个快速解决方案。这是我的观点_form.html.erb文件中的代码：

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

这里是我的资产/ JavaScript的文件夹在我的咖啡文件中的代码：

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

你需要下载相应的jQuery 。链接@vinodadhikary的.maskedinput.js文件在下面提到。然后，你必须要求下面的文件，在你的application.js依赖列表jQuery的文件保存在某个文件中像这样：

//= 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: '[phone]' }) %> 

我希望这可以帮助别人！