I am making a simple web app. At one part of it, I have included an input box of type="number"
<input type="number" min="0"> Anyhow, when I run the code in my latest Google Chrome Browser, I am able to enter text too:
I do not want users to be able to do that. How should I rectify this?
You can use JavaScript (e.g. with jQuery) to allow only specific characters:
// 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 is a fiddle.
Same thing with support for floats:
// 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); }); And here is another fiddle.
Update: Although you might not need this, here is a solution that allows a leading minus sign.
// 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); }); And now a final solution that allows only valid decimals (including floats and negative numbers):
// 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); }); 
You can use HTML5 input type number to restrict only number entries:
<input type="number" name="someid" /> This will work only in HTML5 complaint browser. Make sure your html document's doctype is:
<!DOCTYPE html> For general purpose, you can have JS validation as below:
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 you want to allow decimals replace the "if condition" with this:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57))) 
1.2.3.4 is obviously not a valid decimal. BTW, your code snippet also prevents keyboard shortcuts such as CTRL+A and CTRL+C from working.
CTRL+A and CTRL+C is working fine.. and 1.2.3.4 is not a valid decimal.. correct.. but i believe we haven't written this code to valid decimal numbers... the requirement is different....Just add onkeydown="return false".
<input type="number" min="0" onkeydown="return false">
patternattribute. html5pattern.com