HTML input allow only numeric values | JavaScript

You can use JavaScript to ensure that an input field only accepts numbers by adding an event listener that restricts input to numeric characters. Here's how you can do it with explanations and examples:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />
run this source code Browser View

Numbers and One decimal, but no more.

Full Source | JavaScript
<!DOCTYPE html> <html> <body> <h2>Numbers and One decimal, but no more.</h2> <input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" /> </body> </html>

JavaScript Event Listener

Next, use JavaScript to attach an event listener to the input element. This event listener will trigger whenever a key is pressed within the input field.

const numericInput = document.getElementById('numericInput'); numericInput.addEventListener('keydown', function(event) { // Allow: backspace, delete, tab, escape, enter, and decimal point if ([46, 8, 9, 27, 13, 110].indexOf(event.keyCode) !== -1 // Allow: Ctrl+A, Ctrl+C, Ctrl+V ([65, 67, 86].indexOf(event.keyCode) !== -1 && (event.ctrlKey === true event.metaKey === true)) // Allow: home, end, left, right, down, up (event.keyCode >= 35 && event.keyCode <= 40)) { // Let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((event.shiftKey (event.keyCode < 48 event.keyCode > 57)) && (event.keyCode < 96 event.keyCode > 105)) { event.preventDefault(); } });
Explanation of the JavaScript code:
  1. The event listener is added to the numericInput element and listens for the keydown event.
  2. The code first checks whether the pressed key is a special key (e.g., backspace, delete, tab, etc.) and allows those keys.
  3. It also allows combinations like Ctrl+A, Ctrl+C, and Ctrl+V for text selection and clipboard operations.
  4. The key codes 48-57 represent the numeric keys (0-9), and the key codes 96-105 are for the numeric keypad.
  5. If the pressed key is not in the allowed keys and not a number, the event.preventDefault() function is called to prevent the character from being entered into the input field.
Example:

When users try to input non-numeric characters, they won't appear in the input field. For example, if they try to enter "abc", nothing will appear. But if they type "123", those characters will be allowed.

Remember that this method prevents non-numeric characters from being entered via keyboard input. It doesn't handle cases where non-numeric content is pasted into the input field using the mouse or other means. If you want to ensure that the input is always a valid number, you might want to combine this with additional validation logic.

Allow only numeric values


How do I make a textbox that only accepts numbers? Javascript

By default, an HTML5 input field has the attribute type='number,' which is used to receive input in a numeric format. However, you can enforce numeric value input for an input field with the type 'text' by using JavaScript or jQuery. There are numerous methods available to ensure that the input field only accepts numeric values."

Conclusion

You can ensure that an HTML input field exclusively accepts numeric values by attaching an event listener that restricts non-numeric input. This prevents users from entering non-numeric characters, maintaining the input's numeric format.






Related Topics
  1. JavaScript Popup Boxes
  2. Opening a new window in JavaScript
  3. How to Create Drop-Down Lists in JavaScript
  4. How do I include a JavaScript file in another JavaScript file?
  1. Print the content of a Div using JavaScript/jQuery
  2. How to get the current URL using JavaScript ?
  3. How to Detect a Mobile Device with JavaScript/jQuery
  4. How to validate an email address in JavaScript
  5. JavaScript Array Iteration
  6. How to Remove a Specific Item from an Array in JavaScript
  7. What is JavaScript closures?
  8. How To Remove a Property from a JavaScript Object
  9. How to get selected value from Dropdown list in JavaScript
  10. How do I get the current date in JavaScript?
  11. How to Open URL in New Tab | JavaScript
  12. How to delay/wait/Sleep in code execution | JavaScript
  13. How to round to at most 2 decimal places | JavaScript
  14. How to convert string to boolean | JavaScript
  15. How to check undefined in JavaScript?
  16. How To Copy to Clipboard | JavaScript
  17. How to encode a URL using JavaScript?
  18. How to create multiline string in JavaScript
  19. How to Check for an Empty String in JavaScript?