为什么我不能在同一个 js 文件中建立两个 cleave.js 格式的字段？答案

【问题标题】：Why can't I establish two cleave.js formatted fields in the same js file?为什么我不能在同一个 js 文件中建立两个 cleave.js 格式的字段？
【发布时间】：2016-11-16 16:15:50
【问题描述】：

我想使用cleave.js（在rails 中）格式化电话和信用卡输入。如果我只声明一个 new Cleave 对象，我的格式就可以正常工作，但如果我尝试声明两个对象，则会出现此错误：

Uncaught Error: [cleave.js] Please check the element

下面是JS文件的相关部分：

var Global = {};

Global.onLoad = function(){
  Global.setupDatepickers(); //unrelated function
  Global.setupCleavePhone();
  Global.setupCleaveCreditCard();
};

$(document).on('turbolinks:load', function(){
  Global.onLoad();
});

Global.setupCleavePhone = function() {
  new Cleave('.phone-input', {
    phone: true,
    phoneRegionCode: 'US',
    delimiter: '-'
  });
}

Global.setupCleaveCreditCard = function() {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

我已经尝试了一些混音，包括将 Cleave 对象分配给变量并在同一个函数中声明它们，但没有骰子。这是一个 jsfiddle 的多个 cleave 对象同时被 delared，我看不出我的代码和他们的代码之间有任何有意义的差异。选择器类在视图中正确应用。有什么想法为什么我似乎不能一次格式化两个字段？

【问题讨论】：

标签： javascript jquery ruby-on-rails

【解决方案1】：

已解决：

事实证明，它需要对象存在才能运行new Cleave。如果页面上不存在其中一个元素，则整个事情由于某种原因而失败。我最终包装了每个new Cleave，检查是否存在具有该类的元素，例如：

if ($('.card-input').length) {
  new Cleave('.card-input', {
    delimiter: '-',
    blocks: [4,4,4,4]
  });
}

更新：

或者更好的是，如果您像我一样需要格式化页面上同一类的多个对象（这会导致 cleave 仅使用上面的代码格式化第一个对象）检索对象数组并运行劈开每一个。它执行相同的“是否存在”检查以及格式化每个对象。例如：

for(let field of $('.zip_code').toArray()){
  new Cleave(field, {
    numericOnly: true,
    delimiter: ' ',
    blocks: [5,4]
  });
}

再次更新：

事实证明，上述内容并不理想，因为据我了解，上述let-of 循环（如for-in 循环）将遍历数组的可枚举对象，而不是仅遍历其索引.如果您也想解释这是关于什么的，请查看此答案：For-each over an array in JavaScript?。

同样，我无法为生产预编译我的资产，因为它讨厌使用 let，虽然将 let-of 更改为 for-in 也有效，但我最终选择了更具体的 forEach 循环.

$('.zip-code').toArray().forEach(function(field){
   new Cleave(field, {
      numericOnly: true,
      delimiter: ' ',
      blocks: [5,4]
   })
});

【讨论】：

【解决方案2】：

如果你每次只启用一个它工作？我的意思是只启用 .card-input 然后只启用 .-phone-input ？

【讨论】：

【解决方案3】：

这应该也可以

$('.zip-code').each(function (index, ele) {
    var cleaveCustom = new Cleave(ele, {
        numericOnly: true,
        delimiter: ' ',
        blocks: [5, 4]
    });
});

【讨论】：

【解决方案4】：

我用这样的多个输入解决了这个问题：

$(parentElement).find('[data-cleave]').each(function (i,e) {
                var opt;
                switch ($(e).attr('data-cleave')) {
                    case 'phone': opt = {numericOnly:true,blocks:[12],prefix:'+7'};break;
                    case 'inn': opt = {numericOnly:true,blocks:[12]};break;
                    case 'passport': opt = {numericOnly:true,blocks:[4,6],delimeter:'-'};break;
                    /* e.t.c. */
                    default: opt = {numericOnly:true,blocks:[12],prefix:'+'};break;
                }
                new Cleave('[data-cleave-id="'+$(e).attr('data-cleave-id')+'"]',opt);
            });

并包含一个输入元素的新属性：

data-cleave="phone/inn/passport/etc"
data-cleave-id="<?=hash(md5,rand(1,2048))?>"

JSFiddle

【讨论】：