WordPress表单手机号字段仅允许输入数字需求及代码求助

你已经通过Cleave.js给WordPress站点的Forminator表单手机号字段加了掩码，现在只需补充数字输入限制，下面提供两种可行方案：

方案1：用Cleave.js内置配置实现（推荐） #

Cleave.js本身自带numericOnly参数，开启后会自动过滤所有非数字输入，直接修改你的初始化代码即可：

(function ($, window, document, undefined) {  
  "use strict";  

  const forminator_number_format = {
    run: function (event, form_id) {
      var _form = "#forminator-module-" + form_id,
        _form_el = $(_form);

      if (0 === _form_el.length) return;

      let _phones = _form_el.find(".phone .forminator-input");
      if (_phones.length) {
        _phones.each(function () {
          let _id = _form + " #" + $(this).attr("id");
          new Cleave(_id, {
            delimiters: ["(", ") ", "-"],
            blocks: [0, 2, 5, 4],
            uppercase: true,
            numericOnly: true // 添加这一行，强制只允许数字输入
          });
        });
      }
    },
  };

  $(document).ready(function () {
    $(document).on("after.load.forminator", forminator_number_format.run);
    $(".forminator-custom-form").each(function () {
      forminator_number_format.run(null, $(this).data("form-id"));
    });
  });
})(jQuery, window, document);

方案2：添加输入事件监听（兼容特殊场景） #

如果内置配置不生效，或者需要更严格的限制（比如防止粘贴非数字内容），可以给输入框绑定事件过滤非数字：

(function ($, window, document, undefined) {  
  "use strict";  

  const forminator_number_format = {
    run: function (event, form_id) {
      var _form = "#forminator-module-" + form_id,
        _form_el = $(_form);

      if (0 === _form_el.length) return;

      let _phones = _form_el.find(".phone .forminator-input");
      if (_phones.length) {
        _phones.each(function () {
          let _id = _form + " #" + $(this).attr("id");
          // 保留原有掩码配置
          new Cleave(_id, {
            delimiters: ["(", ") ", "-"],
            blocks: [0, 2, 5, 4],
            uppercase: true,
          });

          // 添加数字输入限制
          const inputEl = $(this);
          inputEl.on("keydown input", function(e) {
            // 允许退格、删除、箭头等控制键
            const allowedKeys = [8, 9, 13, 46, 37, 38, 39, 40];
            if (allowedKeys.includes(e.keyCode)) return;

            // 禁止输入非数字字符
            if (!/[0-9]/.test(e.key)) {
              e.preventDefault();
            }

            // 处理粘贴的非数字内容
            if (e.type === "input") {
              this.value = this.value.replace(/[^0-9]/g, "");
            }
          });
        });
      }
    },
  };

  $(document).ready(function () {
    $(document).on("after.load.forminator", forminator_number_format.run);
    $(".forminator-custom-form").each(function () {
      forminator_number_format.run(null, $(this).data("form-id"));
    });
  });
})(jQuery, window, document);

注意事项 #

• 优先用方案1，代码更简洁，是Cleave.js原生支持的功能
• 修改代码后记得清理WordPress缓存，确保新代码生效

内容的提问来源于stack exchange，提问作者Ismael Lucas