What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

Question

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

While there are numerous similar questions on StackOverflow, none of them fully address all of my requirements in a single solution. Any assistance would be greatly appreciated.

The Issue at Hand

Within my React application, I am in need of a text box that possesses the following attributes:

Strictly allows the input of digits - no minus signs, decimal points, letters, or any characters other than the digits 0-9.
Automatically triggers the number keypad on both iOS and Android devices.
Allows for further customization regarding which numbers can be entered, such as restricting it to only 4 digits.
Automatically removes leading zeroes; for example, if a user types 02, it should correct to just 2.
Permits an empty text box while distinguishing between an empty field and a value of 0.

Current Implementation

https://codepen.io/micahrl/pen/RwGeLmo

The existing code allows non-digit characters to be typed, resulting in a interpretation of the input as NaN. For instance, a user could enter 2f or asdf, prompting the page to display You typed: NaN.

In addition, although the text box initially loads empty, users cannot type something and then delete it back to an empty state. Trying to delete all text from the input box will insert a 0 instead.

Furthermore, the current code does not consistently trim leading zeroes, causing issues when attempting to restrict the number to four digits. Typing 01 may not remove the leading zero; entering 01111 might result in

1111</code on some browsers, which is acceptable, but on others, typing <code>01111

leads to 0111, presenting a problem.

Attempted Solutions

By setting type="number" on the input element, any non-numeric entry will produce an empty string within event.target.value in setNumWrapper. This makes it challenging to differentiate between a truly empty string (indicating all text has been deleted by the user) and invalid input (such as typing a non-numeric sequence like asdf).

Considering switching the input element to type="text" could potentially resolve this issue, were it not for the fact that specifying type="number" seems necessary to trigger the number keypad on mobile operating systems like iOS and Android.

javascript reactjs typescript mobile

Answer 1

Answer №1

Thanks to some experimentation and guidance from @Keith in a comment, I have managed to resolve the majority of my issues.

I have created a modified version of the codepen linked in my initial question, which includes the changes I implemented: https://codepen.io/micahrl/pen/GRjwqdO.

Determining Input Validity

@Keith directed me towards validity.badInput (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput). This allowed me to distinguish between empty input fields and inputs containing non-numeric characters.

To address this, I included the following snippet at the start of setNumWrapper():

    if (event.target.value === "") {
      if (event.target.validity.badInput) {
        // Revert text box and number values to previous valid state
        inputRef.current.value = String(num);
        setNum(num);
      } else {
        // Clear all values if text box is emptied
        inputRef.current.value = "";
        setNum(NaN);
      }
      return;
    }

In addition, I utilized useRef() to create an inputRef, assigning it to the <input> element.

This addresses most of issue #5 as well as a portion of issue #1 (although one minor problem remains).

Removing Leading Zeros

To tackle this, I simply used the existing inputRef to update the value within the <input> element at the conclusion of setNumWrapper():

inputRef.current.value = String(newNum);

As the value of the <input> element is always a string, converting the number to a string automatically eliminates any leading zeros, if present.

Outstanding Issue: Invalid Input Accepted When Text Box is Empty

If the text box is blank, users can input non-numeric characters without triggering the execution of setNumWrapper(). Adding a console.log() statement at the beginning of

setNumWrapper()</code will not log anything for alphabetic entries, but will for numeric ones.</p>
<p>While this cannot be rectified using <code>setNumWrapper()

, it is a relatively minor concern. On mobile devices, the number keypad restricts non-numeric input, offering sufficient control. Although on desktops, users can still type letters, the app's rules clearly indicate only numbers are permitted, making this acceptable for now.

If there is a solution for this particular issue, I am open to suggestions.

Answer 2

Thanks to some experimentation and guidance from @Keith in a comment, I have managed to resolve the majority of my issues.

I have created a modified version of the codepen linked in my initial question, which includes the changes I implemented: https://codepen.io/micahrl/pen/GRjwqdO.

Determining Input Validity

@Keith directed me towards validity.badInput (https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/badInput). This allowed me to distinguish between empty input fields and inputs containing non-numeric characters.

To address this, I included the following snippet at the start of setNumWrapper():

    if (event.target.value === "") {
      if (event.target.validity.badInput) {
        // Revert text box and number values to previous valid state
        inputRef.current.value = String(num);
        setNum(num);
      } else {
        // Clear all values if text box is emptied
        inputRef.current.value = "";
        setNum(NaN);
      }
      return;
    }

In addition, I utilized useRef() to create an inputRef, assigning it to the <input> element.

This addresses most of issue #5 as well as a portion of issue #1 (although one minor problem remains).

Removing Leading Zeros

To tackle this, I simply used the existing inputRef to update the value within the <input> element at the conclusion of setNumWrapper():

inputRef.current.value = String(newNum);

As the value of the <input> element is always a string, converting the number to a string automatically eliminates any leading zeros, if present.

Outstanding Issue: Invalid Input Accepted When Text Box is Empty

If the text box is blank, users can input non-numeric characters without triggering the execution of setNumWrapper(). Adding a console.log() statement at the beginning of

setNumWrapper()</code will not log anything for alphabetic entries, but will for numeric ones.</p>
<p>While this cannot be rectified using <code>setNumWrapper()

, it is a relatively minor concern. On mobile devices, the number keypad restricts non-numeric input, offering sufficient control. Although on desktops, users can still type letters, the app's rules clearly indicate only numbers are permitted, making this acceptable for now.

If there is a solution for this particular issue, I am open to suggestions.

What is the best way to create a React text box that exclusively accepts numeric values or remains empty, and automatically displays the number keypad on mobile devices?

The Issue at Hand

Current Implementation

Attempted Solutions

Answer №1

Determining Input Validity

Removing Leading Zeros

Outstanding Issue: Invalid Input Accepted When Text Box is Empty

Similar questions

Select an option from the navigation bar - the chosen item will remain highlighted

Connecting AWS Amplify Datastore to Material-UI datagrid

What is the best way to center a label horizontally in Material UI within a grid layout?

Issue with custom hook causing rerender when returning an object

What's the most efficient way to iterate through this Array and display its contents in HTML?

Encountering an Object Type Unknown error while working with Typescript and React

Development versions of npm libraries

Update the HTML weather icon with data from JSON

Creating a model for a different user involves several steps that can be easily

Creating TypeScript domain objects from JSON data received from a server within an Angular app

Explaining the process of defining an object type in TypeScript and the conversion from JavaScript

Retrieve information from deeply nested JSON and showcase using Vue-Multiselect

Obtaining data from a CSV file and transforming it into JSON format results in an array

Issue with the react-scripts package when running the npm build command

"Step-by-step guide on populating a select box with data from the scope

Encountering an error with the React Material-UI Datagrid after completing the app development process

Is it necessary for the React generic type prop to be an extension of another type

Securing user access and storing authentication tokens in NextJS

Is it possible to utilize X-Y coordinates as repositories for values beyond just X-Y coordinates themselves?

The system does not acknowledge the command 'Working' as either internal or external