Logo
Back

Is there a quick way to set an HTML text input (<input type=text />) to only allow numeric keystrokes (plus '.')?

Below are several approaches to restrict an <input type="text"> to numeric characters plus a period (.). Note that no purely client-side solution is foolproof (users can paste, or have JavaScript disabled), so always validate on the server side as well. However, these techniques can greatly reduce incorrect input.

1. Use type="number" with Appropriate Attributes

If you only need decimals (e.g., for currency):

<input type="number" step="0.01" />
  • Pros: Automatically restricts some invalid characters in many browsers; provides numeric keyboard on mobile.
  • Cons: Some browsers still allow e, -, or other characters for scientific notation; older browsers may not fully support it; spin buttons may appear.

2. Input Pattern with inputmode="decimal"

You can provide hints to browsers and validation patterns:

<input 
  type="text"
  pattern="[0-9]*[.]?[0-9]*"
  inputmode="decimal"
/>
  • pattern="[0-9]*[.]?[0-9]*": A regex restricting digits, optionally followed by a period and more digits.
  • inputmode="decimal": Suggests a numeric or decimal keyboard on mobile devices.
  • Limitations: Doesn’t strictly prevent keystrokes, but forms can use HTML5 validation (pattern) when submitted. Some browsers won’t enforce it in real time.

3. JavaScript onkeypress or oninput Event

A quick inline solution that filters keystrokes as the user types:

<input 
  type="text"
  onkeypress="return (event.charCode >= 48 && event.charCode <= 57) 
                     || event.charCode === 46" 
/>
  • Explanation:
    • event.charCode >= 48 && event.charCode <= 57 allows ASCII codes 0–9.
    • event.charCode === 46 allows the period (.).
  • Cons: Users can still paste invalid text or drag/drop text into the field. Also, onkeypress doesn’t catch some special keys (e.g., arrow keys).
  • Improvement: Consider an oninput approach or additional checks for paste events: 
    <input 
  type="text" 
  oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
/>

4. Combination of Approaches

To cover more edge cases:

  1. type="number" or type="text" with a regex pattern.
  2. oninput event to remove disallowed characters (like letters or symbols).
  3. Server-side or final form validation to ensure the field has valid numeric data.

Always Validate Server-Side

Even if you implement these client-side measures, malicious or unexpected data can still be submitted via form tampering or older browsers. For robust security and correctness, double-check the input on the server side.

Level Up Your Web Development Skills

To enhance your grasp on HTML forms, JavaScript validation, and general front-end development, explore these courses on DesignGurus.io:

They’ll help you solidify the concepts needed to create robust user input forms and handle edge cases gracefully. Also, consider the DesignGurus.io YouTube channel for tutorials and discussions on web best practices, coding interviews, and system design.

CONTRIBUTOR
TechGrind