How to Allow Only Numeric Input in HTML and JavaScript

By the end of this page, you will understand the difference between restricting what a user can type and validating input correctly. You will learn how to use HTML input types and attributes such as type="number", inputmode, and pattern, and when JavaScript is useful for cleaning or checking numeric input with decimals.

Numeric input in web forms seems simple, but there are actually two separate problems:

1. User experience: guiding the user to enter the right kind of value.
2. Validation: making sure the submitted value is actually valid.

A common beginner idea is to block every non-numeric key as the user types. That can work in simple cases, but it is usually not enough on its own.

Why?

• Users can paste invalid text.
• Different keyboards and devices behave differently.
• Some valid numbers include characters like - or ..
• Browsers may allow scientific notation in numeric fields, such as 1e3.
• Accessibility tools may not behave well with aggressive key blocking.

In real web development, the safer approach is usually:

• Use HTML to hint that the field expects a number.
• Use browser validation where helpful.
• Add JavaScript only if you need extra control.
• Always validate again when processing the form.

For decimal input, the browser can help if you use:

<input type="number" step="any">

However, type="number" does not literally mean “only digits and a dot”. It means “a numeric value”, and browser behavior may vary.

Think of an input field like a door to a building.

• HTML attributes are the signs on the door: “Numbers only, please.”
• JavaScript filtering is a security guard who stops obviously wrong entries.
• Validation is the final ID check inside the building.

A sign helps. A guard helps more. But the final check is what really protects correctness.

So when working with numeric input, do not rely only on the keyboard restriction. Make sure the value is checked before you trust it.

Option 1: Use type="number"

This is the simplest built-in HTML approach.

<input type="number" step="any" />

What this does

• type="number" tells the browser the field expects a number.
• step="any" allows decimal values.

Notes

• Many browsers show numeric controls or numeric keyboards on mobile.
• Users may still be able to type characters like e, -, or + in some browsers because they can be part of valid numeric formats.
• This is usually good for numeric values, but not for strict formatting rules.

Option 2: Use inputmode with a text field

<input type="text" inputmode="decimal" />

What this does

Consider this example:

<input type="text" id="amount" inputmode="decimal" />

<script>
  const input = document.getElementById('amount');

  input.addEventListener('input', () => {
    let value = input.value;
    value = value.replace(/[^0-9.]/g, '');

    const parts = value.split('.');
    if (parts.length > 2) {
      value = parts[0] + '.' + parts.slice(1).join('');
    }

    input.value = value;
  });
</script>

Step-by-step

1. The user types something into the input.
2. The input event runs every time the value changes.

Numeric-only or decimal-friendly inputs are common in many applications.

Typical examples

• Price fields: product price, invoice amount, discount value
• Measurements: weight, height, distance, temperature
• Finance tools: tax rate, loan amount, exchange rate
• Admin dashboards: limits, quotas, percentages
• Data entry forms: quantities, scores, decimal metrics

Example scenarios

E-commerce

A checkout page may ask for a custom amount or quantity.

Health app

A form may accept body weight like 72.5.

Reporting dashboard

An analyst may enter a threshold such as 0.85.

In all of these, the application should both:

• make input easy for the user
• reject invalid values before using them

In real projects, developers usually combine several techniques instead of relying on only one.

Common pattern: HTML hint + JavaScript validation

<input type="text" id="rate" inputmode="decimal" />

function isValidDecimal(value) {
  return /^\d+(\.\d+)?$/.test(value);
}

This keeps the typing experience flexible while still validating the final value.

Guard clause before processing

const value = input.value.trim();

if (!/^\d+(\.\d+)?$/.test(value)) {
  console.log('Invalid number');
  return;
}

const amount = Number(value);
console.log(amount);

This is a guard clause: if the value is invalid, stop early.

Sanitizing pasted input

1. Blocking only keypress

A common older approach is to stop non-numeric keys during keyboard input.

<input onkeypress="return event.charCode >= 48 && event.charCode <= 57">

Why this is a problem

• It does not handle paste well.
• It may block useful keys like backspace, delete, or arrow keys depending on implementation.
• It can behave inconsistently across browsers.

2. Assuming type="number" means only digits and a dot

<input type="number" />

This does not always enforce the exact text format beginners expect.

Avoid this mistake

Use type="number" when you want a numeric value, not when you need strict character-level formatting.

3. Forgetting decimal rules

Broken expectation:

/^\d+$/

This allows only integers, not decimals.

If decimals should be allowed, use something like:

Quick options

General numeric input

<input type="number" step="any" />

Text input with decimal keyboard hint

<input type="text" inputmode="decimal" />

Text input with decimal validation

<input type="text" inputmode="decimal" pattern="^\d+(\.\d+)?$" />

JavaScript validation

/^\d+(\.\d+)?$/

JavaScript sanitizing

value = value.replace(/[^0-9.]/g, '');

Useful rules

• type="number" is for numeric values, not strict text formatting.

Can I make an HTML input accept only numbers without JavaScript?

Yes, you can use type="number". For stricter format rules, you may also use pattern on a text input. JavaScript is helpful when you want to clean input while the user types.

Why does input type="number" still allow some non-digit characters?

Because browsers may allow characters used in valid numeric formats, such as -, +, or e. It is a numeric field, not a strict “digits only” field.

Should I use keypress to block invalid characters?

Usually no. It is better to validate or sanitize on the input event, because that also handles paste and other input methods more reliably.

How do I allow decimals but not letters?

Use a text input with inputmode="decimal" and validate with a pattern like ^\d+(\.\d+)?$, or clean the value using JavaScript.

What is the best input type for currency?

Often developers use a text input with custom validation, because currency fields usually need strict decimal rules such as two decimal places.

Do I still need server-side validation?

Yes. Client-side checks improve usability, but the server must still validate all incoming data.

• HTML forms — Numeric input is part of collecting and submitting form data.
• Form validation — Closely related because restricting input and validating input are different tasks.
• Regular expressions — Useful for checking whether text matches a numeric format.
• JavaScript events — Important for reacting to typing, pasting, and input changes.
• Input attributes — Attributes like type, pattern, step, and inputmode shape input behavior.
• Data sanitization — Cleaning user input is a common safety and usability practice.
• Client-side vs server-side validation — Important for understanding what browser checks can and cannot guarantee.