在<input type =「number」>中禁用文本輸入>

我正在製作一個簡單的網絡應用程序。在它的一個組成部分，我已經包括類型的輸入框=「號」在<input type =「number」>中禁用文本輸入>

<input type="number" min="0">

總之，當我運行在我最新的谷歌Chrome瀏覽器的代碼，我可以輸入文字太：

I entered text in an input type of number

我不希望用戶能夠做到這一點。我應該如何糾正這一點？

來源

2014-01-19 coder

添加JavaScript捕捉輸入和刪除任何的不是一個數字。 –

@MarcB我該怎麼做？ – coder

試試這個，http://stackoverflow.com/questions/7295843/allow-only-numbers-to-be-typed-in-a-textbox –

您可以使用JavaScript（例如使用jQuery），只允許特定的字符：

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^0-9]/g, ''); 
    // Update value 
    $(this).val(sanitized); 
});

Here是小提琴。

與花車支持同樣的事情：

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^0-9.]/g, ''); 
    // Remove the first point if there is more than one 
    sanitized = sanitized.replace(/\.(?=.*\.)/, ''); 
    // Update value 
    $(this).val(sanitized); 
});

而且here是另一個小提琴。

更新：雖然你可能不需要這個，但是這是一個允許前導減號的解決方案。

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^-0-9]/g, ''); 
    // Remove non-leading minus signs 
    sanitized = sanitized.replace(/(.)-+/g, '$1'); 
    // Update value 
    $(this).val(sanitized); 
});

3rd fiddle

而現在最終的解決方案，只允許有效小數（包括花車和負數）：

// Catch all events related to changes 
$('#textbox').on('change keyup', function() { 
    // Remove invalid characters 
    var sanitized = $(this).val().replace(/[^-.0-9]/g, ''); 
    // Remove non-leading minus signs 
    sanitized = sanitized.replace(/(.)-+/g, '$1'); 
    // Remove the first point if there is more than one 
    sanitized = sanitized.replace(/\.(?=.*\.)/g, ''); 
    // Update value 
    $(this).val(sanitized); 
});

Final fiddle

來源

2014-01-19 09:35:37

如果數字有點小數點''。那麼..？這不會幫助... –

@Mike回答更新 –

這不適合我，因爲即使有輸入上的字符，$（this）.val（）等於'' –

您可以使用HTML5 input type number限制只有號碼條目：

<input type="number" name="someid" />

這隻適用於HTML5投訴瀏覽器。確保你的HTML文檔的DOCTYPE是：

<!DOCTYPE html>

對於一般用途，可以有如下JS驗證：

function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode > 31 && (charCode < 48 || charCode > 57)) 
     return false; 
    return true; 
} 

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

如果你想允許小數的這種替換「如果條件」：

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

來源：HTML Text Input allow only Numeric input

來源

2014-01-19 10:21:53

我喜歡你的解決方案，但十進制驗證是不正確的。 '1.2.3.4'顯然不是有效的小數。順便說一句，你的代碼片段還可以防止「CTRL + A」和「CTRL + C」等鍵盤快捷鍵無法工作。 –

@still_learning CTRL + A和CTRL + C工作正常..和'1.2.3.4'不是一個有效的小數..正確..但我相信我們沒有寫這個代碼有效的十進制數。 ..要求是不同的.... –

在<input type =「number」>中禁用文本輸入>

回答

相關問題