驗證按鍵/ keydown上的十進制輸入的Javascript/jquery

我試圖找到一種方法來驗證按鍵上的文本輸入，我想只允許在我的文本輸入內包括小數的數字。驗證按鍵/ keydown上的十進制輸入的Javascript/jquery

我正在採用使用jQuery.keydown的方法，並檢查密鑰是什麼，如果密鑰不在允許列表中，使用event.preventDefault（）。但是從那以後我就讀過這些密鑰在整個瀏覽器中都不一致，我也擔心不同的操作系統。

我已經遇到這個問題，但我對正則表達式不流利，不知道這是否會適合我的需求： jquery - validate characters on keypress?

有了這個方法，它預計00.00將停止用戶00時正則表達式。因爲正確鍵檢查正則表達式，所以鍵入。

謝謝

來源

2012-09-30 Matthew Grima

你不應該依賴於關鍵事件，因爲這將意味着如果用戶做了右鍵單擊驗證會失敗 - >粘貼帶有無效字符。

則應該做的是使用類似zurb的textchanged事件 - 這將準確地觸發，無論輸入的模式（鍵，粘貼，拖放，等等）

http://www.zurb.com/playground/jquery-text-change-custom-event

裏面你textchanged處理程序，您可以放入適當的正則表達式來處理小數。

來源

2012-09-30 08:25:16 techfoobar

我已經使用了它，因爲我發現它非常好，易於使用，並且以我需要的方式應用了Snake Eyes的答案。謝謝 –

如果你想限制輸入（而不是驗證），你可以使用關鍵事件。是這樣的：

<input type="text" class="numbersOnly" value="" />

和：

jQuery('.numbersOnly').keyup(function() { 
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

或，我們可以在用戶已經「左」領域，與上改變事件，這樣，用戶仍然可以更新此用箭頭鍵瀏覽文本。

jQuery('.numbersOnly').on('change', function() { 
    this.value = this.value.replace(/[^0-9\.]/g,''); 
});

這會立即讓用戶知道他們無法在驗證階段輸入字母等字符，而不是稍後。

您仍然需要驗證，因爲可能通過剪切並粘貼鼠標或可能通過可能不會觸發按鍵事件的窗體自動補全來填充輸入。

小提琴：http://jsfiddle.net/shannonhochkins/eu7P9/

來源

2012-09-30 08:25:05

感謝隊友，也是你無法使用箭頭鍵瀏覽文本，您必須爲此添加自定義功能，我只是沒有時間！ –

我可以做到這一點，而不是關鍵，所以它會覆蓋粘貼等。但除此之外，該正則表達式允許多個小數點。 –

@MthethewGrima：查看我的更新代碼。它可以避免在你的輸入中使用多個點'。' –

使用Shannon的回答，我提供了以下簡單的JS代碼：

jQuery('.numbersOnly').keyup(function() { 
    if(($(this).val().split(".")[0]).indexOf("00")>-1){ 
     $(this).val($(this).val().replace("00","0")); 
    } else { 
     $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
    } 
});

在操作中查看：http://jsfiddle.net/SnakeEyes/eu7P9/2/

更新爲避免多次.符號，使用下面的代碼：

jQuery('.numbersOnly').keyup(function (e) { 
    if(($(this).val().split(".")[0]).indexOf("00")>-1){ 
     $(this).val($(this).val().replace("00","0")); 
    } else { 
     $(this).val($(this).val().replace(/[^0-9\.]/g,'')); 
    } 

    if($(this).val().split(".")[2] != null || ($(this).val().split(".")[2]).length){ 
     $(this).val($(this).val().substring(0, $(this).val().lastIndexOf("."))); 
    } 
});

例如：http://jsfiddle.net/SnakeEyes/eu7P9/3/

來源

2012-09-30 08:31:42

我已經使用e.which驗證十進制數

$(document).ready(function() { 
    var isEnable=true; 
$(".only-number-period").live('keydown', function (e) { 
    //isEnable = (e.which != 110) ? false : true; 
     if(((e.which == 9) || (e.which == 46) || (e.which == 8) || (e.which == 110) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105))){ 
      if(isEnable ==false && e.which ==110){return false;} 
     }else{ 
     return false 
     } 
    if (isEnable == true) {    
    isEnable=(e.which ==110)?false:true; 
     } 
    }); 
});

鏈接:: HTTP：//jsfiddle.net/rTr2w/

來源

2012-11-11 11:02:29 Suraz

驗證按鍵/ keydown上的十進制輸入的Javascript/jquery

回答

相關問題