2016-09-09 3 views
0

私は、検証と検証のセットに基づいてユーザーの入力と貼り付けを制限するjavascript関数を作成しています。JavaScriptのイベントを使用して入力を制限する整数と小数点の長さを確認してください

ユーザー入力には、数字、小数点およびカンマを使用できます。

この部分は、ユーザーが指定した整数の整数よりも多くを入力するのを制限するために行われます。

私はいくつかのことを試しましたが、その周りに頭を上げることができませんでした。ここで

$(function(){ 
 
    
 
    $.fn.checkDecimal = function (integer, fractional) { 
 
return this.each(function() { 
 

 
    $(this).on("paste", function (event) { 
 

 
     var val = event.originalEvent.clipboardData.getData('Text'), 
 
        regex = new RegExp("/^\d{0," + integer + "}(?:[.,]\d{1," + fractional + "})?$/"), 
 
        test = regex.test(val); 
 

 
     if (!test) { 
 
      event.preventDefault(); 
 
     } 
 
    }).on('keydown', function (event) { 
 

 
     // Allow: backspace, delete, tab, escape, and enter 
 
     if (event.which == 46 || event.which == 8 || event.which == 9 || event.which == 27 || event.which == 13 || 
 
      // Allow: Ctrl+V 
 
       (event.ctrlKey == true && (event.which == '118' || event.which == '86')) || 
 
      // Allow: Ctrl+c 
 
       (event.ctrlKey == true && (event.which == '99' || event.which == '67')) || 
 
      // Allow: Ctrl+A 
 
      (event.which == 65 && event.ctrlKey === true) || 
 
      // Allow: home, end, left, right 
 
      (event.which >= 35 && event.which <= 39)) { 
 
      // let it happen, don't do anything 
 
      return; 
 
     } 
 
     else { 
 
      //// Ensure that it is a number and stop the keydown 
 

 
      //Only allow period, comma and numbers 
 
      if (event.which != 8 && 
 
        (event.which != 190 || $(this).val().indexOf('.') != -1 || $(this).val().indexOf(',') != -1) && 
 
        (event.which != 188 || $(this).val().indexOf(',') != -1 || $(this).val().indexOf('.') != -1) && 
 
        (event.which < 48 || event.which > 57)) { 
 
       event.preventDefault(); 
 
      } 
 

 
       //Only specified numbers after a decimal 
 
      else if (event.which != 8 && 
 
         (event.which > 48 || event.which < 57) && 
 
         ($(this).val().indexOf('.') != -1) && 
 
         ($(this).val().indexOf('.') < $(this).val().length - fractional)) { 
 
       event.preventDefault(); 
 
      } 
 
       //Only specified numbers before a decimal 
 
      else if (event.which != 8 && 
 
         (event.which > 48 || event.which < 57) && 
 
         ($(this).val().length == integer) && 
 
         $(this).val().indexOf('.') == -1 && 
 
         (event.which != 190 && event.which != 188)) { 
 
       event.preventDefault(); 
 
      } 
 
     } 
 

 
    }).on("keyup", function (event) { 
 

 
     var val = $(this).val(); 
 

 
     $(this).val(val.replace(',', '.')); 
 

 
    }); 
 
}); 
 
} 
 
    
 
    $(document).ready(function(){ 
 
     $('#restrictiveDecimals').checkDecimal(4,3); 
 
    }); 
 
    
 
    
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label> 
 
    Only Numbers, Dot & Comma allowed 
 
    <br> 
 
    But need to restrict input length 
 
</label> 
 
<input type="text" id="restrictiveDecimals">

+1

あなたがダウンして動作していない部分だけにあなたのコードを簡素化しようとする必要があります。ここの人々は、あなたの問題を見つけるためにあなたのコードをすべて調べることは望まないでしょう。デバッグの最初のステップは、何かが間違っていた場所を隔離し、できるだけ簡略化して、部"。私はあなたの問題の少なくとも1つがelseにあると言うことができますが、 "小数点以下2桁のみ"の後には、入力された桁数を制限したいのでおそらく> 48と<57をチェックすることを意味します。 –

+0

@TJRockefellerあなたは私が問題を解決するのに役立ちましたので、あなたは答えにコメントすることができます。私はコードを更新しました。私はもう2つの問題があります。上記のコードは、既存のテキストを選択し、左矢印キーを使用すると数字キーを2回押すと機能しません。これに関するアイデア –

+0

@NikhilGupta私はOPであなたのコードを実行しました。それは4つの整数の後に私を制限しました! – Tushar

答えて

0

ソリューションです。 私は5つの整数と2つの小数を初期化しました。 「。」を付けずに5桁以上を入力している場合は、コードは '。'を配置します。 6位。 実行それとsee..Cheers :)

$(function() { 
 

 
    $.fn.checkDecimal = function(integer, fractional) { 
 
     return this.each(function() { 
 

 
      $(this).on("paste", function(event) { 
 

 
       var val = event.originalEvent.clipboardData.getData('Text'), 
 
        regex = new RegExp("/^\d{0," + integer + "}(?:[.,]\d{1," + fractional + "})?$/"), 
 
        test = regex.test(val); 
 

 
       if (!test) { 
 
        event.preventDefault(); 
 
       } 
 
      }); 
 
      var count=0; 
 
      var no_of_integers = 5; 
 
      var no_of_fractions = 2; 
 
      var int_count = 0; 
 
      var fraction_count = 0; 
 
      $(this).on('keydown', function(event) { 
 
       console.log(count+"-"+int_count+"-"+fraction_count) 
 
       if (int_count == 0 || fraction_count == 0) { 
 
        if (event.which == 46) { 
 
         count--; 
 
         
 
        } 
 
        // Allow: backspace, delete, tab, escape, and enter 
 
        if (event.which == 46 || event.which == 8 || event.which == 9 || event.which == 27 || event.which == 13 || 
 
         // Allow: Ctrl+V 
 
         (event.ctrlKey == true && (event.which == '118' || event.which == '86')) || 
 
         // Allow: Ctrl+c 
 
         (event.ctrlKey == true && (event.which == '99' || event.which == '67')) || 
 
         // Allow: Ctrl+A 
 
         (event.which == 65 && event.ctrlKey === true) || 
 
         // Allow: home, end, left, right 
 
         (event.which >= 35 && event.which <= 39)) { 
 
         // let it happen, don't do anything 
 

 
         return; 
 
        } else { 
 
         //// Ensure that it is a number and stop the keydown 
 

 

 
         //Only allow period, comma and numbers 
 
         if (event.which != 8 && 
 
          (event.which != 190 || $(this).val().indexOf('.') != -1 || $(this).val().indexOf(',') != -1) && 
 
          (event.which != 188 || $(this).val().indexOf(',') != -1 || $(this).val().indexOf('.') != -1) && 
 
          (event.which < 48 || event.which > 57)) { 
 
          event.preventDefault(); 
 
         } 
 

 
         //Only two numbers after a decimal 
 
         else if (event.which != 8 && 
 
          (event.which < 48 || event.which > 57) && 
 
          ($(this).val().indexOf('.') != -1) && 
 
          ($(this).val().indexOf('.') >= 0 && $(this).val().indexOf('.') < $(this).val() - fractional)) { 
 
          event.preventDefault(); 
 
         } else if (event.which == 190) { 
 

 
          int_count = count; 
 
          count = 1; 
 
         } 
 

 
else if (count == no_of_integers) { 
 
           int_count = count; 
 
           count = 1; 
 
           document.getElementById("restrictiveDecimals").value = document.getElementById("restrictiveDecimals").value + "."; 
 
\t \t \t \t \t \t \t \t count++; 
 
          } \t \t \t \t \t \t else { 
 
          if (int_count == 0 && count <= no_of_integers) { 
 
           count++; 
 
           
 
          } else if (int_count != 0 && count < no_of_fractions) { 
 
           count++; 
 
           
 
          } else if (int_count != 0 && count == no_of_fractions) { 
 
           fraction_count = count; 
 
           count == 0; 
 
          } 
 
         } 
 
        } 
 
       } 
 
\t \t \t \t else{ 
 
\t \t \t \t event.preventDefault(); 
 
\t \t \t \t } 
 
      }); 
 

 
      $(this).on("keyup", function(event) { 
 

 
       var val = $(this).val(); 
 

 
       $(this).val(val.replace(',', '.')); 
 

 
      }); 
 
     }); 
 
    } 
 

 
    $(document).ready(function() { 
 
     $('#restrictiveDecimals').checkDecimal(4, 3); 
 
    }); 
 

 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<label> 
 
    Only Numbers, Dot & Comma allowed 
 
    <br> 
 
    But need to restrict input length 
 
</label> 
 
<input type="text" id="restrictiveDecimals">

+0

count変数は文字を削除する機能を考慮していません。カウントをインクリメントする代わりに、おそらく$(this).val()のようなものを使う方が良いでしょう。 –

関連する問題