2017-10-30 13 views
0

내 응용 프로그램에서 jQuery Masking 플러그인을 사용했습니다.jQuery Dynamic Masking

링크가 여기에 주어집니다.

https://github.com/digitalBush/jquery.maskedinput

내가 좋아하는 동적 마스킹이 필요합니다. 언젠가

나는이 000-00-0 0000000-00-0

내가 50000은 다음이 될 것입니다 쓰기 가정하자 50-00-0

은 가정하자 그때 500000 쓰기처럼 사용해야합니다 그것은 500-00-0이 될 것입니다.

따라서 첫 번째 섹션에는 1-7 개의 다른 숫자가 포함됩니다.

그래서 어떻게 할 수 있습니까?

간단한 마스킹 나는 아래 에서처럼 사용하고 있습니다.

$("input[name='mask']").mask("9999999-99-9"); 

솔루션

var my_condition = true; 
    $("input[name='mask']").on('click focus', function(){ 
     $("input[name='mask']").unmask(); 
     my_condition = true; 
    }); 
    $("input[name='mask']").on('change paste', function() { 
     var len = $(this).val().length; 
      if(my_condition) { 
      switch(len) { 
       case 5: 
        $("input[name='mask']").mask('99-99-9'); 
        break; 
       case 6: 
        $("input[name='mask']").mask('999-99-9'); 
        break; 
       case 7: 
        $("input[name='mask']").mask('9999-99-9'); 
        break; 
       case 8: 
        $("input[name='mask']").mask('99999-99-9'); 
        break; 
       case 9: 
        $("input[name='mask']").mask('999999-99-9'); 
        break; 
       case 10: 
        $("input[name='mask']").mask('9999999-99-9'); 
        break; 
       default: 
         $("input[name='mask']").mask('9999'); 
      } 
      my_condition = false; 
     } 
    }); 

덕분에

답변

1

나는 간단한 JSFiddle 내가 그 문제를 해결 할 방법을 설명하기 위해 작성했습니다. 여기

내 JS 코드 :

$("#input").change(function(){ 
var len = $(this).val().length; 


if(len == 4) 
    $(this).mask('99-99'); 
else if (len == 5) 
    $(this).mask('999-99'); 
else if (len == 6) 
    $(this).mask('9-99999'); 
}) 

$("#input").focus(function(){ 
var val = $(this).val().replace("-",""); //remove the dashes from the old masked value 
$(this).mask("9999999999"); //set to maximum length 
$(this).val(val); 
}) 

.mask()의 문제는 사용자가 마스크 "99-99" 설정하면 더 4 이상 기록 할 수 있다는 것을 의미 입력 필드에 대한 최대 길이를 설정한다는 것이다 입력 필드의 숫자. 내 솔루션은 "9999999999"으로 마스크를 설정하고 입력이 집중되면 값을 변경 한 후 적절한 마스크를 설정합니다. 필요에 맞게 change() (우연한 말장난) 이벤트를 변경해야합니다.

구현 결함 :. 그 나쁜 :(

+0

@JohnCraig를 입력하는 동안 사용자가 마스크를 볼 수 없습니다 나는이 라이브러리를 사용하여 할 수있는 다른 방법이 표시되지 않는 내 구현 당신의 관심사는 무엇입니까.? – VTodorov