09 / 17

How to restrict a field to accept only numbers?

Difficulty: 2/10
input types, pattern attribute, client-side validation

Restricting Input to Numbers in HTML

In HTML, you can restrict an input field to accept only numbers by using the type="number" attribute. This ensures that the browser only allows numeric input and shows a numeric keyboard on mobile devices.

Ways to Restrict Input to Numbers
  1. 1

    Use <input type="number"> to accept only numeric values.

  2. 2

    Add min and max attributes to set allowed numeric ranges.

  3. 3

    Use the step attribute to control increments (e.g., step="1" for integers).

  4. 4

    Alternatively, use pattern="[0-9]+" with <input type="text"> for custom numeric-only validation.

Example of Numeric Input

Scenario Questions

0-2 years experience

  1. 1How would you create an HTML input that only allows the user to type numeric characters?
  2. 2If you used `<input type="text">` and added a `pattern` attribute, what would the pattern look like to accept only whole numbers?
  3. 3What happens if a user pastes non-numeric text into a number‑only field—how does the browser respond?

2-5 years experience

  1. 1You need to build a checkout form where the credit card number field must accept only digits, but you also need to support copy‑paste and mobile keyboards. Which HTML attributes or JavaScript would you combine, and why?
  2. 2During QA you notice that the numeric field accepts negative numbers, but the spec says only positive integers. How would you adjust the markup or validation to fix it?
  3. 3Explain why using `type="number"` alone might not be sufficient for validation in a multi‑locale application.

5-8 years experience

  1. 1Our product has a dynamic form builder that renders fields based on JSON schema. How would you design the component to enforce numeric‑only input while keeping it accessible and performant across thousands of concurrent users?
  2. 2We observed that some browsers allow entering 'e' or '.' in `<input type="number">`, causing downstream parsing errors. How would you architect a validation layer to catch these edge cases without degrading user experience?
  3. 3Discuss trade‑offs between client‑side numeric validation using HTML attributes versus server‑side validation in a high‑traffic SaaS platform.

8+ years experience

  1. 1Our organization is migrating legacy forms that use JavaScript keypress filtering to a unified HTML5 validation strategy across multiple teams. How would you lead the migration to ensure consistency, accessibility, and minimal regression?
  2. 2When designing a shared component library for numeric inputs used by dozens of services, what policies would you put in place regarding input types, pattern enforcement, and internationalization?
  3. 3How would you measure and monitor the impact of stricter numeric input validation on conversion rates and error logs across the entire product suite?

Follow-up Questions

  • What limitations have you seen with `type="number"` across different browsers?
  • How would you handle validation for decimal numbers versus integers?
  • Can you describe how you'd test this field for accessibility compliance?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.