Numeric keyboard that allows only 0-9

Hi Outsystems team,

I need numeric keyboard which allows only 0-9 and it will not allow dot or other special characters.I have used the replace regex below. 

Javascript:

$(function() {
  $('#Input_TextVar2').on('input', function() {
    this.value = this.value
      .replace(/[^0-9\.,]/g, "") ;          
  });
});

I am facing issue like if i click dot two times the whole value gets cleared and if i clear the first value the another two value gets cleared.

Is there any other way to achieve it?


Regards,

Indumathy V

Hi Indu mathy,

WEB:

Refer the new solution for WEB:

Download the Forge Component for WEB & refer as below:

Component: https://www.outsystems.com/forge/component/1002/restrictchars/?Unfollow=False

Sample: https://www.outsystems.com/forge/component/3308/restrict-chars-sample/

Output Sample Demo : https://joaomelont.outsystemscloud.com/RestrictCharsSample/

-------------------------------------------------

Mobile:

Refer the below new updated component published for Mobile :

https://www.outsystems.com/forge/component-overview/5014/

An easy and light weight way to restrict characters in a input text field on mobile.

Options available:

  •    Just Numbers
  •    Just Letters
  •    Just Alpha and Numbers
  •    Email
  •    Currency
  •    Date
  •    Just Numbers and Hyphen
  •    Phone Numbers

You can refer the sample for the same:

Restrict Characters Mobile Sample: https://www.outsystems.com/forge/component-overview/5016/

Cheers

Assif


Hi Indu Mathy,

For only numeric keyboard 0-9 you can try:

Take local data type - text variable


JavaScript:
 $('#Input_TextVar2').addEventListener("keypress", function(e){
    var text = this.value.replace(/[^0-9]/g, '') ;
    if (this.value != text){
        this.value = text;
    }
});

Thanks, Hope this helps.

assif_tiger wrote:

Hi Indu mathy,

WEB:

Refer the new solution for WEB:

Download the Forge Component for WEB & refer as below:

Component: https://www.outsystems.com/forge/component/1002/restrictchars/?Unfollow=False

Sample: https://www.outsystems.com/forge/component/3308/restrict-chars-sample/

Output Sample Demo : https://joaomelont.outsystemscloud.com/RestrictCharsSample/

-------------------------------------------------

Mobile:

Refer the below new updated component published for Mobile :

https://www.outsystems.com/forge/component-overview/5014/

An easy and light weight way to restrict characters in a input text field on mobile.

Options available:

  •    Just Numbers
  •    Just Letters
  •    Just Alpha and Numbers
  •    Email
  •    Currency
  •    Date
  •    Just Numbers and Hyphen
  •    Phone Numbers

You can refer the sample for the same:

Restrict Characters Mobile Sample: https://www.outsystems.com/forge/component-overview/5016/

Cheers

Assif


Hi Assif,

I am using Outsystems version 10.0.903.0. I can't able to use the component that you suggested. Can you give me some other solution for this issue?


Regards,

Indumathy V


Viraj Kataria wrote:

Hi Indu Mathy,

For only numeric keyboard 0-9 you can try:

Take local data type - text variable


JavaScript:
 $('#Input_TextVar2').addEventListener("keypress", function(e){
    var text = this.value.replace(/[^0-9]/g, '') ;
    if (this.value != text){
        this.value = text;
    }
});

Thanks, Hope this helps.

Hi Viraj,

I tried the javascript that you are given. But it shows an error "$(...).addEventListener is not a function".

Regards,

Indumathy V


Hi Indu Mathy,

I have made some changes in java and its work for me in the sample.

onReady function load JavaScript:
document.getElementById($parameters.WidgetId).addEventListener("keypress", function(e){
    var patternNotOk = eval("/[^0-9]/g");
    var text = this.value.replace(patternNotOk, '');
    if (this.value != text){
        this.value = text;
    }
});

document.getElementById($parameters.WidgetId).addEventListener("keyup", function(e){
    var patternNotOk = eval("/[^0-9]/g");
    var text = this.value.replace(patternNotOk, '');
    if (this.value != text){
        this.value = text;
    }
});

 Hope this helps.

Thanks