Rails视图中电话表单字段的输入掩码

Question

我在我的应用程序中有一个客户联系表单，当然需要电话输入。我正在运行Rails 3.2.13并使用Zurb Foundation。我希望找到一个gem来提供一个输入掩码，格式为“[phone]”，以便我可以调用它。我的数据非常本地化，所以只需要美国格式的数字。

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

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

有没有什么很棒的gem，或者你喜欢的jQuery插件呢？

干杯！

-编辑

因此，这是我需要完成的全部答案。 以防有人寻找快速解决方案。 这是我_form.html.erb视图文件中的代码：

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

这里是我位于assets/javascripts文件夹中的coffee文件中的代码：

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

您需要从下面@vinodadhikary提到的链接下载相应的jquery.maskedinput.js文件。然后，在您的application.js文件的依赖项列表中，您必须在jquery文件下方的某个地方要求该文件，如下所示：

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

就这些了。如果您注意到任何不妥之处，请告诉我，我会进行编辑。

- ctgScott

---

请查看：http://digitalbush.com/projects/masked-input-plugin/。非常好用的插件，可以看一下演示标签页。 - vee

非常感谢！看起来完美。 - ctgScott

你应该把 jquery.maskedinput.js 文件放在哪里？我把 .mask 函数放在了 x.coffee 中，其中 x 是我的表单所在的控制器。这样做正确吗？谢谢。 - Théo Capdet

Answer 1

我一直在使用插件http://digitalbush.com/projects/masked-input-plugin，它的效果非常好。

我的应用程序使用coffeescript，并有很多不同掩码的字段，所以我使用了这种方法。

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

现在我可以在任何字段上设置data-mask属性：

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

我希望这能帮助到某人！

- Tom Rossi