Mask MUI input to be able to add one or two digit number - reactjs

I am implementing an input, where the user should type number in the following format: 12/34/56. I have found that react-input-mask allows to do so. But my question now is how to make the mask either require the user to fully enter the number (to remove such cases 1_/3_/_5) or add zeros where the number wasn't entered.
Also, another thing I think of is to allow either one or two digits, but I haven't seen documentation on this in react-input-mask
I am willing to choose another mask library, if you know it can be done so.

I figured it out. There is a property called maskChar, if you set it to null, e.g <InputMask maskChar={null} mask="99/99/99" /> won't allow user to proceed to second number, without filling both digits.

Related

IBM Watson - Sys-number does not get 0

in this case, I want to use sys-number to get numbers sequence, and this number can start with 0. But, if the user types 034234342342, the sys-number does not recognize the 0, just 34234342342.
Have any Contorn Solution for this? In this case, to get all number?
This is one Regex condition inside Conversation flow and I want to use sys-number to get the ALL number if the user types "My protocol number is 034234342342".
And sys-number will be the new condition and get the complete number.
If not have how to do it with sys-number. Please, try answer to me how to do that in this user case.
EDIT:
Check my example:
My try it out:
You should be able to use #sys-number to detect that number. Failing that you could do:
input.text.find('\d{11}')
find() allows to find any occurrence, while matches() is a full line match.
Capturing you can use:
<? input.text.extract('\d{11}',0) ?>
That also allows group capturing.
Other then this you won't be able to capture preceding zeros with #sys-number.
Also if you put the checks directly into the JSON, then you need to escape out the \ with \\.

Watson, types of condidions

I have one example.
I create some intent inside Watson Conversation, and I want to knows how I can do some condition for it?
Example:
Watson: Hi, tell me your number
Me: 99999-9999 (and have some regex inside advanced conversation flows, i check wih context variables in the case is number and works fine)
The conversation will only continue if he enters the 9 numbers correctly.
I try it:
check image
Use a regular expression to parse the input and extract the number using syntax similar to
then have a dialog node condition based on the number extracted.

xtype: numberfield value is going to auto correct(change) for more than 16 digit value

can any one explain why(how) the xtype: numberfield value is going to auto correct(change) if am providing more than a 16 digits value.
For Example:
22222222222222222 is changed to 22222222222222224
222222222222222222 is changed to 222222222222222200
2222222222222222222 is changed to 2222222222222222300
22222222222222222222 is changed to 22222222222222220000
222222222222222222222 is changed to 222222222222222230000
2222222222222222222222 is changed to 2.2222222222222222e+21
22222222222222222222222 is changed to 2.2222222222222223e+22
Which results in my page after rendering as shown below when get the value through in my component jsp page
NumberFieldTestValue:<%= properties.get("numberfieldname","") %>
Resulting as below
NumberFieldTestValue: 2.2222222222222223e+22
The problem
This behavior is caused by the fact that the dialog behavior is implemented in JavaScript. The numbers you're having problems with cannot be represented in it.
The language conforms to the ECMASCRIPT 5.1 specification.
To quote the Number type description
all the positive and negative integers whose magnitude is no greater
than 2^53 are representable in the Number type
The base 2 logarithm of 2222222222222222222222 is about 70, which means the number exceeds the maximum value. Hence your problems.
All in all, if you check your examples in a plain JS console in a browser, the same behavior will be displayed so this is not really a CQ problem.
Solution 1 - use a different type
To avoid this, you could potentially use xtype="textfield" and validate it against a regular expression to see if it consists of numbers only. Then you'd have to make sure to use a type capable of holding such numbers at the backend (like BigInteger).
The field could look like this:
<numberOfSandGrains
jcr:primaryType="cq:Widget"
fieldLabel="Number of grains of sand at the beach"
name="./grainsCount"
regex="/\d+/"
regexText="Please enter a numeric value."
xtype="textfield"/>
Solution 2 - change scale
Another option is to change the logic behind the configuration and use some different units if applicable. For instance, if the value 2222222222222222222222 is a number of grams (weight of an object/substance), it makes perfect sense to read it in metric tons instead (at least in many cases). The author could probably do without entering such humongous numbers.
You'll need to be extra-careful if you go this way.

Write special masked TextBox for WPF

I want to develop a custom user control in WPF which has some sort of mask. this functionality is very like the one provided in many online applications where u enter your credit card number and next time whenever u sign in to your account u see only last for digits of the card number (something like ***4587) but while I display data in this way I want to keep real value unchanged so inside binding I will access full data.
You could try something like this:
string originalNumber = textBoxOriginalNumber.Text;
int numberOfDigits = textBoxOriginalNumber.Text.Length;
string hidden = new String('*', numberOfDigits-4);
textBoxModifiedNumber.Text = hidden + originalNumber.Remove(0, numberOfDigits-4);
It's is not an elegant solution but will help you if anybody else give you a better solution. Basically, it takes the original credit card number, counts how many digits it has, removes the "n-4" first digits, then show the * symbol "n-4" times plus the four last digits. This will work no matter how many digits the original number has.
Additionally, I'm not sure if a mask (or the Regex suggested by the other user bellow) would work because (if I understood it well) it would replace the whole number, instead of show the last 4 digits.
OK here is the way I resolved that issue. after working with Card numbers I wanted to work with ID and SN numbers as well so what I did was just wrote little method which takes in string and returns masked value here it is in case someone needs this in feature.
public static string GetMaskedNumber(string unsecuredNumber, char maskChar)
{
return unsecuredNumber.Substring(unsecuredNumber.Length - 4)
.PadLeft(unsecuredNumber.Length - 6, ' ')
.PadLeft(unsecuredNumber.Length, maskChar);
}
You could use Regex.Replace with \d to indicate a digit
i.e.
var digits = new Regex(#"\d");
modifiedNumber = digits.Replace(originalNumber, "*");
Or if you want to update the whole set of numbers except for the last group
#"\d{4}-"

VXML for DTMF entry of letters based on their placement on dialpad

I'm brand new to VXML (and coding in general) and apparently what I'm trying to do is... not normal, but hopefully it can be done.
I understand the principle concept of DTMF input with VXML where I use:
<grammar mode="dtmf"><![CDATA[ (*|0|1|2|3|4|5|6|7|8|9)<2-31> ]]></grammar>
<prompt>something here</prompt>
<noinput-nomatch-filled>conditions</noinput-nomatch-filled>
What I'm trying to do is take multiple actions to allow DTMF entry of letters based on their placement on the dialpad. You'd achieve this by first dialing the number that the letter is on (2-9), and the placement of that letter (1-4).
For example: "E" would be 3 and 2 on the dialpad.
I'm at a complete loss as to how this would work in VXML. What I'd like to do is this:
1) PROMPT: Please input your THREE letter code. Please enter your first letter.
2) Expect two DTMF inputs the first number between 2 and 9, the second number between 1 and 4. Based on this logic (33 = F, 94 = Z) the letter is set.
3) PROMPT: The letter you have entered is (INPUT). Is this correct? Press 1 for yes, 2 to retry.
4) Retry or go onto the next letter. So on and so forth.
If anyone has resources so I can stumble upon the answer to this myself, that'd be great! If anyone would like a bounty... that's an option, too! Thank you for reading!
The typical approach to this problem is just accept twice the number of tones as you expect or use a pound terminated input. Then use ECMAscript or server side code to translate the tone strings into the desired letters.
There are a couple of a ways to approach this problem:
1) You could just accept all 2 digit numbers in the grammar and do all validation/calculation on the server side.
and/or
2) Do some validation in the <filled> section and letter-decoding-from-number on the server-side (and then come back with the result and check with the user if that was the intended letter).
For the two-digit grammar, you could parameterize the built-in digits grammar as follows (please note that the URI scheme is platform-specific, so you may need to refer to the user manual of your voice browser to be sure of the exact scheme to be used)
<field type="digits?length=2">
<prompt>Please enter the code of the first letter</prompt>
</field>
There are other ways as well, like you could also do letter-decoding on the client-side using a script on the same page, but hopefully the above gives some ideas on what to choose based on your requirement.
(Actually, the OP would probably not be looking for an answer to this question after so long but hopefully it helps others who landed on this page searching for a solution to a similar question)
The best way could be to define a grammar that link each value to the result letter :
<grammar mode="dtmf" root="letter">
<rule id="letter">
<one-of>
<item>32<tag>E</tag></item>
...
</one-of>
</rule>
</grammar>
Another way is to let the user enter the 2 letters and process it with a EcmaScript function, or use the tag .
I am going to plan to add such feature in the Voximal the VoiceXML interpreter for Asterisk.
But are you sure that the users can be able to understand and use this method to enter letters ?

Resources