Jquery - 我无法在字段中应用掩码

Question

我是使用 Jquery 的新手，我正在尝试在字段中应用掩码，但出现以下错误：

TypeError: $(...).mask 不是函数

这是我的 HTML

<div class="col-md-6">
    <div class="form-group">
        <label>CPF</label>
        <input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
    </div>
</div>

这是我的脚本：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#cpf").mask("999.999.999-99");
});
</script>

我已经尝试做 $(document).ready(function($){} 但我没有成功。 有人有想法吗？经过多次尝试，我有点迷失了

Answer 1

主要问题是“https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js”链接。我收到“拒绝从...执行，因为它的 MIME 类型（'text/plain'）不可执行，并且启用了严格的 MIME 类型检查”。 前两行不包含协议。

解决方案（无论如何在我的测试中有效，如果您有问题/问题请联系我）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js" type="text/javascript"></script
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js" type="text/javascript"></script>

Answer 2

也许这可以帮助你。我认为您需要一个 jQuery 掩码插件。我看到了几个，但这篇文章将引导您朝着正确的方向前进JQuery apply input mask to field onfocus and remove onblur so to avoid problems with placeholder text

Answer 3

您是否尝试在本地访问库？...因为如果您需要将 http 协议或 https 添加到 jquery 库和 jquery 表单验证器

如果没有它们，您将无法在本地访问这些库，因此 $()mask 不会被识别为函数

像这样：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>

Answer 4

也许你应该使用类选择器$('.cpf').mask(); 而不是 id 选择器。这应该有效：

$(document).ready(function(){

    $(".cpf").mask("000.000.000-00");
});

另外，你也可以用这种方式：

<input type="text" name="field-name" data-mask="000.000.000-00" />

Answer 5

$(document).ready(function() {

  $("#cpf").mask("999.999.999-99");
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<div class="col-md-6">
  <div class="form-group">
    <label>CPF</label>
    <input type="text" maxlength="17" id="cpf" name="cpf" class="form-control cpf" />
  </div>
</div>

<script src="https://rawgit.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>

使用 about 链接而不是您的链接

使用rawgit.com查看here了解更多信息

Answer 6

使用下面的

<input type="text" pattern="[0-9]{3}\.[0-9]{3}\.[0-9]{3}\-[0-9]{2}" value="" name="cpf" id="cpf" maxlength="17" placeholder="CPF">

JSFiddle here