2012-05-13 74 views
5

我有一個要限制的輸入字段,以便用戶只能輸入最多兩位小數的數字。希望使用jQuery來做到這一點。使用jQuery將輸入字段限制爲兩位小數

我可以使用jQuery toFixed()函數嗎?

感謝名單!

+0

爲什麼要使用jQuery?你可以在html中使用「maxlenght = 2」來做同樣的事情...接下來,如果你想確保用戶只能插入小數,你可以在事件「onkeypress」上調用一個函數 – AleVale94

+0

聽起來就像你想驗證一個錢場。也許這將有助於:http://javascriptbymallik.blogspot.com/2009/08/how-to-check-two-decimal-validation-in。html – Tim

回答

8
$('input#decimal').blur(function(){ 
    var num = parseFloat($(this).val()); 
    var cleanNum = num.toFixed(2); 
    $(this).val(cleanNum); 
    if(num/cleanNum < 1){ 
     $('#error').text('Please enter only 2 decimal places, we have truncated extra points'); 
     } 
    }); 

這裏是一個小提琴http://jsfiddle.net/sabithpocker/PD2nV/

使用toFixed將無論如何引起逼近123.6666 -> 123.67 如果你想避免近似檢查這個答案Display two decimal places, no rounding

2
$("#myInput").focusout(function() { 
    if ($(this).val().length > 2 || isNaN(Number($(this).val())) { 
     alert("Wrong number format"); 
    } 
}); 
+0

這似乎只是檢查值的長度,而不是值中的小數位數。 –

+0

與@PhilDD相同,它錯過了一個「)」 – projo

3
<input type="text" name="amount1" id="amount1" class="num_fld Amt" onkeypress="return check_digit(event,this,8,2);" size="9" value="" maxlength="8" style="text-align:right;" /> 

下列功能就會限制小數根據你的小數位的需要,也限制更多的t漢一個點

function check_digit(e,obj,intsize,deczize) { 
    var keycode; 

    if (window.event) keycode = window.event.keyCode; 
    else if (e) { keycode = e.which; } 
    else { return true; } 

    var fieldval= (obj.value), 
     dots = fieldval.split(".").length; 

    if(keycode == 46) { 
     return dots <= 1; 
    } 
    if(keycode == 8 || keycode == 9 || keycode == 46 || keycode == 13) { 
     // back space, tab, delete, enter 
     return true; 
    }   
    if((keycode>=32 && keycode <=45) || keycode==47 || (keycode>=58 && keycode<=127)) { 
     return false; 
    } 
    if(fieldval == "0" && keycode == 48) { 
     return false; 
    } 
    if(fieldval.indexOf(".") != -1) { 
     if(keycode == 46) { 
      return false; 
     } 
     var splitfield = fieldval.split("."); 
     if(splitfield[1].length >= deczize && keycode != 8 && keycode != 0) 
      return false; 
     }else if(fieldval.length >= intsize && keycode != 46) { 
      return false; 
     }else { 
      return true; 
     } 
    } 
} 
3

HTML5的解決方案:

<input type="number" step="0.01" /> 

Demo

如果你想樣式無效輸入(一些瀏覽器在默認情況下做到這一點),你可以使用:invalid選擇:

input:invalid { box-shadow: 0 0 1.5px 1px red; } 

請注意,此方法不會嘗試自動截斷數字,但如果用戶輸入兩個以上的十進制數字,輸入將變得無效,因此表單不會提交:

Screenshot on Firefox

2

使用正則表達式的另一種方法:

$('#id').on('input', function() { 
     this.value = this.value.match(/^\d+\.?\d{0,2}/); 
    }); 

ID選擇可以由CSS選擇來替換。

0
<input type="text" id="decCheck" onkeyup="decimalCheck();"/> 

<script> 
function decimalCheck(){ 
var dec = document.getElementById('decCheck').value; 
if(dec.includes(".")){ 
    var res = dec.substring(dec.indexOf(".")+1); 
    var kl = res.split(""); 
    if(kl.length > 1){ 
    document.getElementById('decCheck').value=(parseInt(dec * 100)/
     100).toFixed(2); 
    } 
    } 
} 
</script> 
相關問題