Numeric keyboard that allows only 0-9
Question

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

Champion

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


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


mvp_badge
MVP

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.

Untitled.png

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

Hi, to achieve this, you just need to set in the attribute type = "numeric" ou "tel".

 

Change from "tel" to "numeric" to achieve what you want.

This is the correct approach.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.