使用jQuery蒙面問題插件

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: " " }); 
}); 

原因退格或刪除導致的問題是，因爲該插件嘗試新的面膜適用於文本行是不正確。因此，在你的鍵盤功能中，你需要檢查新的掩碼是否到位（輸入字段的長度將是15），並且按下的鍵是退格鍵（code = 8）還是刪除鍵（code = 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以上所有。