时间戳

首页 > 解决方案 > 使用 jQuery ruby​​ gem 设置输入掩码

jquery - 使用 jQuery ruby​​ gem 设置输入掩码

问题描述

我一直在尝试在我的网站上为电话号码字段实施输入屏蔽。由于某些（可能是愚蠢的）原因，我无法让我的代码与 jQuery 插件链接。我下载了 Ruby gem 并完成了所有步骤，但我的浏览器显示未定义变量。我怀疑我没有正确设置 gem。

Github 链接

该功能的主要网站

我已将 gem 安装到我的 gemfile 中并运行 bundle

我已将调用包含在我的 application.js 中

然后尝试在我的代码中实现它

我知道它需要该文件：jquery.mask.min.js但无法将其与我的项目链接

如果有任何更简单的方法可以在 Ruby on Rails 中实现此功能，我很乐意使用它！

PS：经过长时间的休息后，我要回到编码领域，所以我在做这样简单的事情时遇到了麻烦！

<div class="form-group col-md-6">
<label>Phone</label>

<%= f.text_field :phone, class: 'control phone_us', maxlength: 20 %>

</div>

<script type="text/javascript">
  $(document).ready(function(){
    ('.phone_us').mask('(000) 000-0000');
  })
</script> 

Uncaught TypeError: ".phone_us".mask is not a function

    at HTMLDocument.<anonymous> (<anonymous>:3:19)
    at mightThrow (jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1:3558)
    at process (jquery3.self-e200ee796ef24add7054280d843a80de75392557bb4248241e870fac0914c0c1.js?body=1:3626)

标签： jqueryruby-on-railsrubygemsjquery-inputmask

解决方案

看起来您$在('.phone_us'). 像：

$('.phone_us').mask('(000) 000-0000');

此外，如果您使用的是 turbolinks，您可能需要监听该turbolinks:load事件，例如：

$(document).on "turbolinks:load", ->
  alert "page has loaded!"

如5.2 Page Change Events下的文档中所述。

推荐阅读