为什么我不能在同一个js文件中建立两个clev .js格式的字段?

Why can't I establish two cleave.js formatted fields in the same js file?

本文关键字：js clev 两个 格式 字段 不能 同一个 文件 建立 为什么      更新时间：2023-09-26

我想使用cleve .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对象的示例，我看不出我的代码和他们的代码有什么有意义的区别。选择器类在视图中被正确应用。有什么想法，为什么我似乎不能格式化两个字段一次?

SOLVED:

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

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

或者更好的情况是，如果您像我一样需要在一个页面上格式化同一个类的多个对象(这导致cleave只使用上面的代码格式化第一个对象)，则检索对象数组并对每个对象运行cleave。它执行相同的"是否存在"检查以及格式化每个对象。例如:

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

再次更新:

因此，事实证明，上面是不太理想的，因为，据我所知，上面的let-of循环(像for-in循环)将遍历数组的可枚举对象，而不仅仅是它的索引。看看这个答案，如果你也想解释这是什么:For-each在一个数组在JavaScript?

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

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

这应该也可以

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

如果每次只启用一个?我的意思是只启用。card-input然后只启用。phone-input ?

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

$(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);
            });

并包含一个输入元素new attributes:

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

JSFiddle

相关文章：