Making number input accept only numbers in Edge/Firefox

Introduction

In this blog, you will learn how to handle number input fields in Edge or Firefox browsers.

A number input field is used whenever numeric data is the expected input from the user. The ideal behavior of sap.m.Input type=”Number” is that it accepts only numbers and any other character typed on the keyboard will neither be displayed on the screen nor be present in the “value” property of the input field.

But this behavior is not supported in Microsoft Edge or Firefox browsers. These browsers accept non numeric characters even though the type of the input field is “Number”.

The following is a screenshot of the Input sample from the SAPUI5 demo-kit on Microsoft Edge. As we can see, a number input accepts characters.

The Fix

The solution for this is to include appropriate validation in the controller. But there’s a catch. When the data in the input field is not a number and we try to access the value of the sap.m.Input field, we get a null as the result. This holds valid for all methods of accessing the value: using events like liveChange or change and using getValue method.

The fix for this is that we use this very fact to validate if the data in the field is a number or not.

In the controller whenever liveChange or change triggered on a Number input, check if the value is null. If it is null, then the data in the input field is invalid and the value state of the field can be set accordingly to “Warning” or “Error” by using setValueState(). If it is not null the data is a valid number and here the value state must be set to “Success” or “None”.

Whenever some number input field has been set to value state of “Error”, we can block the submit of the form in the controller, thereby ensuring only numeric data is entered wherever expected.

Example code snippet:

View:

<Input
type="Number"
liveChange="validateNumberInput">
</Input>

Controller:

This is the implementation of the event handler.

validateNumberInput: function(oEvent) {
    var value = oEvent.getParameters("value").value;
    var src = oEvent.getSource();
    if ( value === "" ) {
        src.setValueState("Error");
        src.setValueStateText("Please enter a valid number);
    } else {
        src.setValueState("None");
    }
}

This will behave like this:

For invalid input:

For valid number:

Added perk of this logic:

Google Chrome supports Number input, that is, it accepts only numbers typed on the keyboard, additionally it also accepts these characters: . (dot), e (exponential), – (minus) and + (plus). Hence when you access the value of a number input to do validation using regex (or any other logic),if the entry contains these characters and is invalid, for example: “1..2” or “-1-2”, you will get a null, hence failing the regex test. We can fix this behavior by first checking if the value is null and continuing to do further regex tests only if the value is not null. If the value turns out to be null in the first check, we can straightaway set the value state of the input field accordingly and skip the regex tests.

Conclusion

Although we cannot make Edge and Firefox browsers properly support number input, we can make sure that the user enters only numeric data wherever expected by using this logic. We can expect Edge and Firefox to provide support for number input in future releases; until then, this workaround can be implemented.