Question

我想使用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多个解理对象，我的代码和他们的代码之间没有任何有意义的差异。选择器类在视图中正确应用。有什么想法，我似乎无法一次格式化两个字段？

Answer 1

解决：

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

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

更新：

甚至更好，如果你像我一样，需要在页面上格式化同一个类的多个对象（这会导致cleave只用上面的代码格式化第一个）检索对象数组并在每个上运行cleave。它执行相同的＆＃39;它是否存在＆＃39;检查以及格式化每个对象。例如：

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]
   })
});

Answer 2

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

Answer 3

这应该也可以

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

Answer 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);
            });

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

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

JSFiddle

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

4 个答案: