Max-length Problem with NumericInput

#1 · July 12, 2020, 3:09 am

currently, max-length property does not work for NumericInput.

What is the best approach to apply max-length on NumericInput?

#2 · July 12, 2020, 4:40 am

currently, max-length property does not work for NumericInput.

I played around with this object ... assigned a variable [myNumber] to it ... and watched the value of the variable ...

a) by having a Container with the variable as its content
b) invoking an AlertBox in the change event of the NumericInput object

I found that as soon as you exceed the max-length ...

a) the Container shows a blank content
b) the AlertBox reports undefined

... but the NumericInput object still shows all the numbers

And if you delete the extra digit(s), the variable (with the max-length) is re-displayed and reported.

If you delete all digits, the variable is reported as null.

What is the best approach to apply max-length on NumericInput?

Assuming the variable associated with the object is [myNumber], try this code in the change event of the object ...

If [myNumber] != undefined
   SetVar [mySavedNumber] [myNumber]
Else
   SetVar [myNumber] [mySavedNumber]
EndIf

... the only anomaly I found was that something like 89. is saved as 89 ... so, if you had maximum length set to 3, and you tried to enter a fourth number, it would revert to 89 (not 89.) ...but it can provide a work around until the object validation/display is fixed.

#3 · July 12, 2020, 6:00 am

Hi @gaev,

Thank you for your explanation, but here is a problem it has disabled Backspace,

Is there any way to solve this?

Uploaded files:

You need to login to have access to uploads.

#4 · July 12, 2020, 10:58 am

@asmat please take a look here:
https://stackoverflow.com/questions/18510845/maxlength-ignored-for-input-type-number-in-chrome

You can also use this code to better control a Numeric Input:

SetObjectAttribute "NumericInput1" "min" 0
SetObjectAttribute "NumericInput1" "max" 9
SetObjectAttribute "NumericInput1" "step" 2

Regards.

#5 · July 12, 2020, 12:47 pm

Hi @luishp, thank you so much, your code is working better, I have applied your code with jquery class selection but it does not work , This is my code, am I missing something?

BEGINJS
$('.myclass').attr('min',0);
$('.myclass').attr('max',9);
$('.myclass').attr('step',2);
ENDJS

#6 · July 12, 2020, 2:43 pm

@asmat your code is correct.
It works for me. Please take a look at the attched sample app.

Uploaded files:

You need to login to have access to uploads.

#7 · July 12, 2020, 3:14 pm

@Hi luishp, I have tested in latest version of Mozilla the results are quite different.. see the below record:

https://tinyurl.com/yar76lre

#8 · July 12, 2020, 4:57 pm

@asmat

here is a problem it has disabled Backspace,
Is there any way to solve this?

The problem only occurs when you try to remove the very last digit with Backspace.

I hope there is a solution with the use of "attributes" (while deployed in a Firefox browser).

If not, I came up with this (enhanced) code for the change event ...

StrLen "[myNumber]" [myNumberLen]

If [myNumber] === undefined
   If [myNumberLen] == 9
      ... exceeded max-length
      SetVar [myNumber] [mySavedNumber]
   EndIf
EndIf

If [myNumber] === null
   If [myNumberLen] == 4
      ... true null value
      SetVar [myNumber] ""
   EndIf
EndIf

If [myNumber] != undefined
   If [myNumber] != null
      ... within range
      SetVar [mySavedNumber] [myNumber]
   EndIf
EndIf

Explanation:

The value in the associated variable ([myNumber]) is null/undefined both, when the entered digits exceed the max-length property and when there are no digits entered.

So, I check for multiple conditions ... the reported length of the variable content AND the value in it ... when it is undefined, the length is 9 ... and when it is null, the length is 4

Check it out under a variety of conditions and let me know if something does not work as expected.

@luishp

While investigating several options, I realized that VisualNEOWeb's If command does not appear (via the wizard) to specify multiple conditions (using AND/OR boolean operators) ... I got around this via nested If commands ... is there any way/syntax to specify multiple conditions in a single If command ?

#9 · July 12, 2020, 5:14 pm

@gaev

While investigating several options, I realized that VisualNEOWeb's If command does not appear (via the wizard) to specify multiple conditions (using AND/OR boolean operators) ... I got around this via nested If commands ... is there any way/syntax to specify multiple conditions in a single If command ?

Yes just use, IfEx just like this

IfEx ([myVar]>20 || [anotherVar]!=10) && [justOneMoreVar]=="yes"
  AlertBox "Warning" "You have entered a complex IF" ""
EndIf

Regards.

#10 · July 12, 2020, 5:16 pm

@asmat, please share your sample app. I don't get the same results than you.
For me it's in both situations as you show in your video in the first position.
Thanks.

#11 · July 12, 2020, 5:20 pm

@luishp here is sample:

Uploaded files:

You need to login to have access to uploads.

#12 · July 12, 2020, 5:40 pm

Hi @asmat,
Yes I confirm same results as you in both cases using Chrome and FireFox, but can't say why.
It's probably due to how AngularJS works with Input Fields. This is how SetObjectAttribute works:

$scope.SetObjectAttribute = function(objId,AttrName,AttrValue) {
 $("#"+objId).attr(AttrName,AttrValue);
 var e = document.getElementById(objId);
 $compile(e)($scope);
};

It seems the $compile is important here but don't know how to use it here.

#13 · July 12, 2020, 6:01 pm

@luishp , @Gaev, Thank you so much, finally I decide to use loop instead of class.

Loop 1 20 [i]
   SetObjectAttribute "cell[i]" "min" 0
   SetObjectAttribute "cell[i]" "max" 9
   SetObjectAttribute "cell[i]" "step" 2
Endloop

Max-length Problem with NumericInput - Forum

Max-length Problem with NumericInput