Skip to Content
Author's profile photo Sreehari V Pillai

SAPUI5: Numbers only textfield & Currency Textfields

Introduction

     In many cases when we develop web pages for business purposes, we may need to limit the text field numeric only(age,phone numbers etc). Same way, customers need the currency to be entered separated by comma,instead of seeing it as plain numbers. Here I am adding the code snippets to make the SAPUI5 text field to cater both the cases.

Create a Plain SAPUI5 TextField(sap.ui.commons.TextField)


var textbox = new sap.ui.commons.TextField("data",{
  textDirection : sap.ui.core.TextDirection.RTL
  });

Making the TextField to accept only numbers :

     For this, we need to register browser event “keypress” for the textbox, so that the corresponding event handler would handle the pressed key, and check if it is a number or not.


textbox.attachBrowserEvent("keypress",function(e){
  var key_codes = [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8];
            if (!($.inArray(e.which, key_codes) >= 0)) {
              e.preventDefault();
            }     
  });

where , [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 0, 8] is the array of ASCII values ranging from 0 to 9. It makes sure that the hit key is in this range.

Now the text box is numbers only.

Making theTextField  as a Currency field

    

     All we need is to define a JavaScript function to put the comma between the digits properly, and handle the decimal places. Here, for this example, I consider INR so that the comma separation will be 3,2,2.. pattern and is having 2 decimal places.

          Instead of keypress , we will be using keyup event to capture the data.


textbox.attachBrowserEvent("keyup",function(e){
  var Number1 = e.srcElement.value; // source element pointer with data
     var CommaSeperaterList = '3,2,2,2,2,2,2,2,2';
     var Number = Number1.replace(/\,/g, '');
     var myArray = CommaSeperaterList.split(',');
     var newNum = "";
     var newNum2 = "";
     var end;
     var count = 0;
     if (Number.indexOf('.') != -1) {       
         places = Number.length - Number.indexOf('.') - 1;
         if (places >= 3) {
             num = parseFloat(Number);
             Number = num.toFixed(2);
         }
         var a = Number.split(".");
         Number = a[0];  
         end = '.' + a[1];
     }
     else { var end = ""; }
     var q = 0;
     for (var k = Number.length - 1; k >= 0; k--) {
         ar = myArray[q];
         var oneChar = Number.charAt(k);
         if (count == ar) {
             newNum += ",";
             newNum += oneChar;
             count = 1;
             q++;
             continue;
         }
         else {
             newNum += oneChar;
             count++;
         }
     }
     for (var k = newNum.length - 1; k >= 0; k--) {
         var oneChar = newNum.charAt(k);
         newNum2 += oneChar;
     }
     e.srcElement.value = newNum2 + end;     
  });

where, ‘3,2,2,2,2,2,2,2,2’ is being the comma places. Based on the currency type, we can change it and adapt new comma separation system.

Number = num.toFixed(2); statement fixes the decimal places to 2.

snip.JPG

Regards,

Sreehari.

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin van het Hof
      Robin van het Hof

      If you have a modern browser (Chrome 24+, FF 29+, IE 11, Opera 15) you could use the much simpler Intl.NumberFormat object:

      
          var oTF = new sap.ui.commons.TextField({
            value     : 0,
            textAlign : sap.ui.core.TextAlign.Right,
            editable  : true,
            change : function(oEvent) {
              var value = oEvent.getSource().getValue();
              var floatValue = parseFloat(value);
              var formatter = new Intl.NumberFormat('en-US', {
                style: "currency",
                currency: "EUR"
              });
              this.setValue(formatter.format(floatValue));
            }
          });
      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      True, Thanks Robin. Looks like I complicated it 🙂

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      Since UI5 uses jQuery, you could use any jQuery's plugin for input mask, e.g., jQuery Inputmask | jQuery Plugin Registry

      It's easier and a crossbrowser solution.