문제

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인지) 누르고 누른 키가 백 스페이스 (코드 = 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 위의 내용이 모두 적용됩니다.