RobinHerbots / Inputmask

Input Mask plugin
https://robinherbots.github.io/Inputmask/
MIT License
6.4k stars 2.17k forks source link

Decimal - Full Width Character Mask #1606

Open wesleywong opened 7 years ago

wesleywong commented 7 years ago

Hi,

Is there possible can mask decimal with full width character. e.g.

var mask = { radixPoint: ".", prefix: "$" digits: 2, autoGroup: true, groupSeparator: ",", rightAlign: false, groupSize: 3, autoUnmask: true }; $(selector).inputmask("decimal", mask);

Case: 1111 = valid 1111= invalid and unable to enter to input (Japanese character - Haragana)

RobinHerbots commented 7 years ago

Hi @wesleywong ,

The full width character is not included in the regex for integer validation.

Let's first try a simpler mask like below. Can you have a try if you can enter the full width character

http://www.unicode.org/charts/ https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms

 Inputmask("9999", {
            definitions: {
                "9": {
                    validator: "[0-9,\uFF11-\uFF19]",
                    cardinality: 1,
                    definitionSymbol: "*"
                }
            },
        }).mask(selector);
RobinHerbots commented 7 years ago

@wesleywong ,

I would be great to create some kind of extension which extends the definitions to allow input of japanese characters and others. Also see #76

wesleywong commented 7 years ago

@RobinHerbots

Thanks for the reply. yeah, by this code i can type in full width character just that it will double up the character when i enter. e.g. "1" = "11"

RobinHerbots commented 7 years ago

@wesleywong ,

How exactly do you type such full width characters. I tried installing the japanese microsoft ime and with Ime Pad I could correctly enter the char. But I guess this is not a real live usage ;-)

I am not at home with such an input, so any help and feedback is welcome.

wesleywong commented 7 years ago

actually you can use google input to get the full character. translate.google.com and select japanese then choose the keyboard provided by google and enter 123.

screen shot 2017-06-06 at 4 47 30 pm

RobinHerbots commented 7 years ago

I installed the google transcript extension on chrome Thx 123456 => works ;-)

Do you have the character doubling with the above mask? I don't experience this

wesleywong commented 7 years ago

Paste no problem, but if i enter manually will be doubling the character. not sure is my version prob * Version: 3.3.2-27

RobinHerbots commented 7 years ago

@wesleywong ,

Can you try with the current version on github

saavedrah commented 7 years ago

Hello Robin,

I'm also trying to set a mask to Japanese characters without being able to make it work.

In Firefox ver 55.0.2 (32-bit) using your Demo page I'm typing in the Decimal format [123456789] (double-bit characters) which results in the correct entry [123,456,789]

However, in Chrome ver 60.0.3112.101 (Official Build)(64-bit) , when typing the same double-byte characters I get [123,568,974], somehow it seems that the last comma makes the following characters to shift.

Do you mind to take a look at it. I'm using InputMask ver 3.3.7-13

I should also say, that I'm trying on Windows 10

Thank you

RobinHerbots commented 7 years ago

@saavedrah ,

Did you try with https://github.com/RobinHerbots/Inputmask/issues/1606#issuecomment-306409731

 Inputmask("9999", {
            definitions: {
                "9": {
                    validator: "[0-9\uFF11-\uFF19]",
                    cardinality: 1,
                    definitionSymbol: "*"
                }
            },
        }).mask(selector);

I didn't add the extra char range in the default definition for numbers.

saavedrah commented 7 years ago

Hello Robin,

Another issue related with the double-byte input is that when using a numeric keyboard to enter the double-byte characters and the decimal mask, defined in https://github.com/RobinHerbots/Inputmask/blob/3.x/js/inputmask.numeric.extensions.js if the dot[.] character is entered nothing happens.

For instance, if I type [1.2], one dot two, this is the log generated:

keydown: value=  e.keyCode= 229 e.key= Process , 1 vs  , keydown: value= 1 e.keyCode= 229 e.key= Process 1 , . vs 1 , keydown: value= 1 e.keyCode= 229 e.key= Process 1 , 2 vs 1 ,

And in the textbox where the mask should be applied the value [12] without [.] is shown.

Do you know what should I do to allow to read the double-byte dot character ?

This is the definition of the control: <input type="text" id="sample1"   data-inputmask="'alias':'decimal'"   data-inputmask-digits="2"   data-inputmask-enforceDigitsOnBlur="true"   data-inputmask-groupSeparator=","   data-inputmask-groupSize="3"   data-inputmask-autoGroup="true" />

Thank you

saavedrah commented 7 years ago

Hello,

Does anyone has the same problem when entering a double-byte dot character using a decimal input mask ?

@wesleywong @RobinHerbots

Thank you

wesleywong commented 7 years ago

@RobinHerbots is there a way can implement this into decimal type

definitions: {
    "9": {
        validator: "[0-9\uFF11-\uFF19]",
        cardinality: 1,
        definitionSymbol: "*"
    }
}
$selector.inputmask("decimal", mask);
RobinHerbots commented 7 years ago

@wesleywong ,

You will need to adjust the regex in the "~": definition inside the numeric extension. When it works you may send a PR, so I can merge it in.

wesleywong commented 7 years ago

@RobinHerbots

by adjust the regex in "~" definition inside numeric extension that only able to input single(full-width) character, for example if you type second number, the first number will be replaced by second.

var isValid = strict ? new RegExp("[0-9\uFF11-\uFF19" + Inputmask.escapeRegex(opts.groupSeparator) + "]").test(chrs) : new RegExp("[0-9\uFF11-\uFF19]").test(chrs);

wesleywong commented 6 years ago

by updating "~": definition also have to solve the caret position issue when comma appear.

e.g. input 1234 expected result : 1,234| output: 1,23|4

type 12345 expected result : 12,345| output: 12,35|4

IsCaster commented 4 years ago

Should be "[0-9\uFF10-\uFF19]"

Now full-width "0" is ignored.

RobinHerbots commented 4 years ago

@IsCaster ,

Thx, I updated the definition.
Can someone test the decimal with full width chars on the letest beta?

KathleenLu1 commented 2 years ago

@wesleywong

@RobinHerbots

Thanks for the reply. yeah, by this code i can type in full width character just that it will double up the character when i enter. e.g. "1" = "11"

How do you fixed this issue?