Please input numbers only into the designated field

Question

Please input numbers only into the designated field

I am trying to create an input field in my form that only accepts numbers when pasted into it.

For example: If I have some random characters like W123W000 on my clipboard, the input field should only paste 123000.

Note: This solution is currently only functional in Chrome browser.

I have been exploring possible solutions online and have found the following code snippet. However, it does not seem to be working as intended.

var inputBox = document.getElementsByClassName('numbersOnly');
                inputBox.onchange = function () {
                    inputBox.value = inputBox.value.replace(/[^0-9]/g, '');
                }

<input id="number" type="number" class="numbersOnly">

javascript jquery html css

Answer 1

Answer №1

To ensure cross-browser compatibility, utilize jQuery and attach the event input to manage every change.

In Firefox: <input type="number">

Elements automatically reject any input that is not a number (or empty, unless required).

If you switch to type=text, you will lose the specific numeric keypad feature on devices.

var inputBox = $('.numbersOnly').on('input', function(e) {
  e.preventDefault();
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="number" type="text" class="numbersOnly">

Answer 2

To ensure cross-browser compatibility, utilize jQuery and attach the event input to manage every change.

In Firefox: <input type="number">

Elements automatically reject any input that is not a number (or empty, unless required).

If you switch to type=text, you will lose the specific numeric keypad feature on devices.

var inputBox = $('.numbersOnly').on('input', function(e) {
  e.preventDefault();
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="number" type="text" class="numbersOnly">

Please input numbers only into the designated field

Answer №1

Similar questions

A JavaScript code snippet that stores the total number of bytes read from a CSV file in a variable

Passing parameters in HTML web applications

An error occurred while trying to retrieve a resource from the bower_components directory using Vue.js CLI

"Communication breakdown in Vue.js: $emit event not being picked up by corresponding $

What is the best way to create operating system-neutral file paths in Node.js?

Tips for transferring data from one tab to another tab using Greasemonkey

An HTML/CSS component that dynamically adjusts its height at random intervals

Implement an innovative solution to automatically close the navbar component in tailwindcss on

Transform a Mongoose object into a specific JSON schema

Using JQuery and Bootstrap, add or remove rows dynamically

When a form input is submitted, the webpage will refresh with a new

Automatically Assigning a Default Value to a Column Using SEQUELIZE ORM

What is the best way to select an element based on its relationship to another Element object using a selector?

Having trouble with protractor's sendKeys function when trying to interact with md-contact-chips

A guide on utilizing getStaticProps to map a collection obtained from Strapi within a Next.js component

problem with overlapping elements

Parsing JSON or eliminating double quotation marks in data acquired from a model or database within the Rails framework

Can Webpack effectively reduce the size of jQuery files?

I am looking to integrate a function into an ejs page using a node.js app and express, but I need to ensure that it does not execute

Scrolling to an element is not possible when it has both position absolute and overflow-x hidden properties