30
Views
9
Comments
Solved
Max 3 digit check on integer field reactive web app outsystems

Hi All,

How I can limit user to add max 3 digit check on integer field text box reactive web app?


Thanks,

Jaydeep


Rank: #185
Solution

Hi Jaydeep,

here is a demo with my solution to this

1- add a class to this input (any class, is just to get on the javascript code)

2 - add an event onkeydown and create new handler action

3 - add a javascript node and type the code bellow:

var value = document.querySelector('.XXXXXX').value;

if (value.length > 2) {

    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 ) {

        return true;

    }

   event.preventDefault();

    return false; 

}


obs: the XXX should be changed by the code you defined on the previous steps


4 - enjoy it :)


Hope I could help you

Cheers,

Carlos Lessa


ReactiveTestsInput3Numbers.oml

Rank: #185

Hi Jaydeep, try to use the properties maxlength=3 on the attributes, check pic bellow


Hope I could help you

Cheers

Carlos Lessa

Rank: #2895

Hi Jaydeep,


I think the attribute maxlength has some compatibility issues in some browsers (and also native apps for iOS).

Another approach is writing a small JS:

function inptLimit(inputID)
{
    var max_chars = 3;

    if(inputID.value.length > max_chars) {
        inputID.value = inputID.value.substr(0, max_chars);
    }
}

And then use the function in the Input events: onkeydown="inptLimit(this);" onkeyup="inptLimit(this);"

Rank: #94

Hi Jaydeep,


As per my experience, maxlength attribute for input type numbers is ignored. I tried to implement this behavior using other attributes such as max and min attributes, but unfortunately they doesn't stop the user from entering a value outside the specified range. Even using some other attributes, it wasn't resulting in the expected output.


So I managed to do it using some JavaScript code:

document.getElementById("Input_Number").addEventListener("input", function() {
  Input_Number.value = Input_Number.value.slice(0, $parameters.MaxLength);
});

where Input_Number is the element that you pretend to limit and MaxLength your number of allowed digits.


Just place this JavaScript code in your screen / block OnReady event and it should work as expected.


Please refer to attached OML file with an example :)


Hope that this helps you!


Kind regards,

Rui Barradas

NumberMaximumLenght3.oml

Rank: #94

Hello Jaydeep,

Did you check this example?


Kind regards,

Rui Barradas

Rank: #185

check this post related to the problem in chrome related with the input number

https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome 

this will complement some answers here

Cheers,

Carlos Lessa

Rank: #18113

Hi Helder,


How to pass this in service studio? inptLimit(this); 


Thanks,

Jaydeep

Rank: #2895

What I did:

1. Created a module script and made it a required script for the Screen (see properties of screen) - Paste the function inptLimit 

2. go to your input on the page and select the events onkeyup and onkeydown, both pointing to the same screen client action.

3. Client action runs a javascript which calls the function from the script created in 1 and call it inptLimit($parameters.InputID);   -Yes, you need to pass on the InputID from the screen into the JS.


Let me know if you still have issues, then I can attach a sample.


Cheers.

Rank: #18113

Hi Helder,


Could you please share sample? I tried.


Thanks,

Jaydeep

Rank: #185
Solution

Hi Jaydeep,

here is a demo with my solution to this

1- add a class to this input (any class, is just to get on the javascript code)

2 - add an event onkeydown and create new handler action

3 - add a javascript node and type the code bellow:

var value = document.querySelector('.XXXXXX').value;

if (value.length > 2) {

    var key = event.keyCode || event.charCode;

    if( key == 8 || key == 46 ) {

        return true;

    }

   event.preventDefault();

    return false; 

}


obs: the XXX should be changed by the code you defined on the previous steps


4 - enjoy it :)


Hope I could help you

Cheers,

Carlos Lessa


ReactiveTestsInput3Numbers.oml