Prevent Non Numeric In input type number textfield & Hide Arrow

Inputs of type=”number” have below usability issues:

  • In chrome it allows certain non-numeric characters like (‘e’, ‘+’, ‘-‘, ‘.’) and in Firefox it allows all non-numeric characters.
  • It has up and down arrows which is used to increment or decrement the number but sometimes it is observed that user accidentally increase or decrease values.

In this blog, we will see that how to overcome these issues.

Below I have given examples for Material UI textfield in React  and also for default input field in Vanilla Javascript.

Let’s consider two browsers Chrome and Firefox because both show different behaviour for type=number.

When we use input type=number

  • In Chrome , you will observe that it does not allow the user to enter non-numeric values but it allows the characters like (‘e’, ‘+’, ‘-‘, ‘.’) . You can find the example for the same below.
  • In Firefox, user can enter any value in the number field , so we need to add the check for the keyboard keys which we don’t want to be entered by the user.

How to disallow characters like (‘e’, ‘+’, ‘-‘, ‘.’) in type=number  in chrome

In case of MUI TextField consider below example

If we want to restrict some particular keyboard keys then we can make use of the onKeyDown event property which is event.key to capture the key and prevent the user to enter that key in the textfield.

In case of Javascript input field consider below example

Here we will take use of keydown event of JS to achieve the required behaviour.

In chrome we only need to restrict some keys so we can use event.key.

How to disallow non-numeric values in type=number TextField in Firefox

In case of MUI TextField consider below example

In Firefox we need to restrict all the non-numeric values so we can use the onKeyDown event property event.keyCode to restrict the range of keyboard keys to be entered.

I have put the check for Backspace so that we can edit or delete the entered value from the Mui TextField if required.

In case of Javascript input field consider below example

 How to remove Up & Down Arrow from type=number TextField

Here we can use the css to achieve the required behaviour. We will use different css for FireFox and for other browsers.

In case of MUI TextField consider below example

In the below example, I have used <style> tag to use the css which is defined in the variable arrow_remove_css

In case of Javascript input field consider below example

 


Mui TextField is used as a nested component with the popular Mui component called Autocomplete.

You can use these customization with Autocomplete and also learn more about the different style and customization of Mui Autocomplete here.


Important Note

Using input type number is beneficial for the user experience on mobile devices because when the user clicks in this field the mobile keypad only shows the numeric keypad to the user.

But due to above issues in the input type=number, it is recommended by MUI to use the alternative of type=number as shown below

In Vanilla Javascript consider below

To support this statement it also recommends to see this article by the GOV.UK Design System team.

 

One thought on “Prevent Non Numeric In input type number textfield & Hide Arrow

Leave a Reply

Your email address will not be published. Required fields are marked *