Проблемы с JQuery Masked плагин

Question

Это мое поле с маской:

$('#Cellphone').mask("(99)9999-9999?9", { placeholder: " " }); 

1. Я хочу, чтобы очистить маску, когда мой вход потерял свое внимание. Есть ли способ сделать это? Что-то вроде опции плагина ...

   $('#Cellphone').mask("(99)9999-9999?9", { 
       placeholder: " ", 
       clearOnLostFocus: true 
   }); 
   

   или в функцию размытия:

   $('#Cellphone').blur(function() { 
       // clear the mask here. 
   }); 
   

2. Я хочу изменить свою маску динамически. Я использую эту функцию, и работает очень хорошо ...

   $('#Cellphone').keyup(function() { 
       var newValue = $(this).val() 
        .replace("(", "") 
        .replace(")", "") 
        .replace(" ", "") 
        .replace("-", "") 
        .replace("?", ""); 
   
       if (newValue.length > 10) { 
        $(this).mask("(99)9-9999-9999", { placeholder: " " }); 
       } 
   }); 
   

   НО ... Когда я нажимаю забой с содержанием этого поля, выбранного, моя маска перестает работать. Любая идея, почему это происходит?

Спасибо, ребята!

Answer 1

Опция clearOnLostFocus работает, если вы не заполнили маску правильно. То есть если у вас есть нет, введите все цифры, затем оставьте вход, он очистит его.

$('#cellphone').mask("(99)9999-9999?9", { placeholder: " ", clearOnLostFocus: true }); 

Если вы хотите, чтобы поле ввода пустым при потере фокуса даже когда цифры внутри поля соответствовать маске, то вам необходимо использовать blur событие. В отзыве события, очистить поле и повторно применять маску ввода:

$("#cellphone").blur(function() { 
    $(this).val(""); 
    $(this).mask("(99)9999-9999?9", { placeholder: " " }); 
}); 

Причину, по которой забой или удалить вызывают проблемы, потому что плагин пытается применить новую маску к строке текста, неверно , Поэтому в вашей функции keyup вам нужно проверить, установлена ​​ли новая маска (длина поля ввода будет равна 15), и если нажатая клавиша была обратным пространством (код = 8) или клавишей удаления (код = 46). Если да, то вам нужно повторно применить старую маску.

$('#cellphone').keyup(function (event) { 
    if ($(this).val().length > 14 && ((event.keyCode == 8)||(event.keyCode == 46))) { 
     $(this).mask("(99)9999-9999?9", { placeholder: " " }); 
    } else { 
      var newValue = $(this).val() 
       .replace("(", "") 
       .replace(")", "") 
       .replace(" ", "") 
       .replace("-", "") 
       .replace("?", ""); 

      if (newValue.length > 10) { 
       $(this).mask("(99)9-9999-9999", { placeholder: " " }); 
      } 
    } 
}); 

JSFiddle here со всеми вышеперечисленными.