2013-09-26 39 views
2

我在讓用戶在具有相同類的文本框中輸入數字值時出現問題。防止用戶在小數點前2位後輸入更多數字

我想:

  • 允許用戶小數點前只輸入2個數字和另外2之後;否則所有按鍵都記錄除箭頭鍵,退格鍵和刪除鍵

本期

  • 用戶只能進入2號;然而,在他/她添加小數點後,他們可以在其之前添加更多數字。
  • 目前,用戶只能輸入5位數 - 小數點前2位,小數點後2位。當他們在小數點後刪除一位數字時,他們仍然可以在該小數點之前向數字添加更多數字。

我的HTML:

<form method="post"> 
    <div class="row"> 
     <label>Val 1</label> 
     <input type="text" class="validate" name="val1" maxlength="5" /> 
    </div> 
    <div class="row"> 
     <label>Val 2</label> 
     <input type="text" class="validate" name="val2" maxlength="5" /> 
    </div> 
    <div class="row"> 
     <label>Val 3</label> 
     <input type="text" class="validate" name="val3" maxlength="5" /> 
    </div> 
    <div class="row"> 
     <button type="submit">Send</button> 
    </div> 
</form> 

我的JS:

Number.prototype.between = function (a, b, inclusive) { 
     var min = Math.min.apply(Math, [a,b]), 
      max = Math.max.apply(Math, [a,b]); 
     return inclusive ? this >= min && this <= max : this > min && this < max; 
    }; 
$('.validate').keypress(function(event) { 
     var v = parseFloat($(this).val() + String.fromCharCode(event.which)); 

     textValue = parseFloat(v).toString(); 
     var newVal = parseInt(textValue.substr(0, textValue.indexOf("."))); 

     console.log(newVal); 
     if(textValue.length < 6){ 
      if(!parseFloat(v).between(0,99.99,true)) { 
       v = this.value.substring(0, 2); 
       $(this).val(v); 
       return false; 
      } 
      return true; 
     } 
    }); 

這裏是鏈接到我的fiddel DEMO

回答

3

試試這個:

<input type="text" class="validate" name="val1" maxlength="5" onkeypress="return CheckDecimalValues(event)" /> 

function CheckDecimalValues(evt) { 
    var keyCode = evt.keyCode ? evt.keyCode : ((evt.charCode) ? evt.charCode : evt.which); 
    // 8 Backspace 
    // 9 Tab key 
    // 46 Delete 
    // 35 End Key 
    // 36 Home Key 
    // 37 Left arrow Move 
    // 39 Right arrow Move 
    if (!(keyCode >= 48 && keyCode <= 57)) { 
     if (!(keyCode == 8 || keyCode == 9 || keyCode == 35 || keyCode == 36 || keyCode == 37 || keyCode == 39 || keyCode == 46)) { 
      return false; 
     } 
     else { 
      return true; 
     } 
    } 

    var velement = evt.target || evt.srcElement 
    var fstpart_val = velement.value; 
    var fstpart = velement.value.length; 
    if (fstpart .length == 2) return false; 
    var parts = velement.value.split('.'); 
    if (parts[0].length >= 14) return false; 
    if (parts.length == 2 && parts[1].length >= 2) return false; 
} 
+0

我剛剛發現這種方法的問題。當用戶複製/粘貼具有2個以上小數點的數字時,它是允許的。所以我使用了BGS&Aashray提出的兩種方法。 – Sung

2

爲什麼不使用正則表達式來驗證您的需求?

一個簡單的正則表達式,如下所示:

[0-9]{1}[0-9]{1}[\.]{1}[0-9]{1}[0-9]{1}

可以用來驗證輸入,而無需擔心關鍵筆劃。只需在您的文本框中添加onblur事件即可驗證此事件。

編輯:

我加入這個Fiddle

檢查出來。

+0

你能告訴我如何融入按鍵事件嗎?我很抱歉,因爲我對jquery非常陌生 –

+0

我添加了一個小提琴。看看它是否滿足您的要求。 – Aashray

+0

啊,這是行不通的。我目前希望用戶在小數點前後只輸入2位數字。我的問題是,當用戶刪除最後2位數字時,他們可以在前2位添加1位數字 –

相關問題