テキストボックスに0〜100パーセントの値しか入力できない

Question

テキストボックスがあります。 0〜100の値を入力したい。100以下の値または負の値。

FIDDLE

このフィドルを確認してください。ここでは、99のように2桁の値のみを許可しています。99の後に、このように小数点以下の桁数（99 .......... 9999）を許可しています。小数点以下1桁のみを入力する必要があり、100を入力することもできます。

注：

1. は、小数点の後より100.00
2. を100に0を入力していない負とすることはできません私は99.99だけ、のような唯一の2桁の数字を入力します。
3. 負の値を許可しないでください。
4. （9.99または99.99）のように1つの小数点のみを許可します。ない（9 ....... 9 ... 9 ... 80099または99 ....... 9 ... 9）。

   <script> 
    
       function check(e,value){ 
    
       //Check Charater 
    
       var unicode=e.charCode? e.charCode : e.keyCode; 
    
       if (value.indexOf(".") != -1)if(unicode == 46)return false; 
    
       if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false; 
    
       } 
    
       function checkLength(){ 
    
       var fieldVal = document.getElementById('txtF').value; 
    
       //Suppose u want 3 number of character 
    
       if(fieldVal < 100){ 
    
        return true; 
    
       } 
    
       else 
    
       { 
    
        var str = document.getElementById('txtF').value; 
    
        str = str.substring(0, str.length - 1); 
    
        document.getElementById('txtF').value = str; 
    
       } 
    
       } 
    
   </script> 
    
       
    
   <input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" /> 
    
   <p id="s"></p>

私はこのjQueryまたはJavaScriptを使用して行うことができますどのように私を助けてください。

Answer 1

<script> 
var point=false; 
var count=0; 
function check(e,value){ 

//Check Charater 
debugger; 
if(count==3)return false; 
    var unicode=e.charCode? e.charCode : e.keyCode; 

    if(unicode == 46 && point==true) 
      return false; 
    if(unicode == 46 && point==false) 
    { 
      point=true; 
    } 
    if (unicode!=8)if((unicode<48||unicode>57)&&unicode!=46)return false; 
    if(point==true)count++; 
} 
function checkLength(){ 
var fieldVal = document.getElementById('txtF').value; 
//Suppose u want 3 number of character 
if(fieldVal <= 100){ 
    return true; 
} 
else 
{ 
    var str = document.getElementById('txtF').value; 
    str = str.substring(0, str.length - 1); 
document.getElementById('txtF').value = str; 
} 
} 
</script> 

<input id="txtF" type="number" onKeyPress="return check(event,value)" onInput="checkLength()" /> 
    <p id="s"></p> 

http://jsfiddle.net/ySt7S/130/

Answer 2

Updated fiddle.これは今のためにそれを解決するが、ステップ= 0.01の使用は、あなたが望むものではないかもしれません。ステップを0.01に設定すると、入力の有効性の状態を確認できます。

"before"イベントで有効な状態は更新されませんので、入力をロールバックする "after"イベントになります。

<input id="txtF" type="number" onInput="return check(event,value)" min="0" max="100" step="0.01" /> 

check = function (e,value){ 
    if (!e.target.validity.valid) { 
     e.target.value = value.substring(0,value.length - 1); 
     return false; 
    } 
    var idx = value.indexOf('.'); 
    if (idx >= 0 && value.length - idx > 3) { 
     e.target.value = value.substring(0,value.length - 1); 
     return false;    
    } 
    return true; 
}