Disable Text Entry in <input type="number">

Asked 19/1, 2014 at 9:24 Answered 26/1 at 23:16

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 entered text in an input type of number

I do not want users to be able to do that. How should I rectify this?

Oligarchy answered 19/1, 2014 at 9:24 Comment(4)

add javascript to catch input and delete anything that's not a number. – Pectase 19/1, 2014 at 9:24

@MarcB How do I do that? – Oligarchy 19/1, 2014 at 9:27

Try this, #7296343 – Interstate 19/1, 2014 at 9:36

Note: You could also use the pattern attribute. html5pattern.com – Jamboree 19/1, 2014 at 11:4

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);
});

3rd fiddle

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);
});

Final fiddle

Eolic answered 19/1, 2014 at 9:35 Comment(2)

this don't work for me because even there is char on input, the $(this).val() equals '' – Allmon 15/6, 2014 at 10:53

how could you move the input cursor to the same place as before? you can write in the middle as well – Brock 26/8, 2015 at 13:29

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)))

Source: HTML Text Input allow only Numeric input

Hannover answered 19/1, 2014 at 10:21 Comment(2)

I like your solution but the decimal validation is incorrect. 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. – Eolic 19/1, 2014 at 10:44

@still_learning 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.... – Hannover 19/1, 2014 at 10:59

Just add onkeydown="return false".

<input type="number" min="0" onkeydown="return false">

Ria answered 26/1 at 23:16 Comment(0)

Recommended topics

Hot tags