2017-10-30 4 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