Inconsistent Behavior: Mobile Devices

[AlexanderMorou]

Inconsistent Behavior

The Input mask appears to behave differently on certain mobile devices than it does on traditional desktop systems.

An example: I have a language-specific date-pattern defined, based off of the originating culture from ASP.NET. On certain mobile devices the separator trivia appears to be required on the mobile devices, and trying to enter: MM/DD/YYYY as MMDDYYYY gives unpredictable and usually incorrect behavior.

The user can, on these devices, enter the separators and get a better experience. The issue with this is the inconsistency between devices. If a user tries one device and switches to another later, the behavior may result in these fields not being entered due to the confusion, the user may experience, of the inconsistency.

Expected Behavior

Consistent Behavior across platforms. If the separator trivia is required, it should always be required.

Actual Behavior

Attached is an example of the value: 11/11/1911, entered in two ways:

1. Without Entering Separator Trivia
2. With Entering Separator Trivia

Definitions

The HTML which defines the input is as follows:

<input id="CurrentDataForm.Items[2].Response" name="CurrentDataForm.Items[2].Response" class="form-control" autocomplete="off" data-input-mask="mask" data-inputmask-placeholder="mm/dd/yyyy" data-input-masks="D/B/M" type="text">

The JavaScript defining D/B/M is as follows:

Inputmask.extendDefinitions(
{ 'D':
{
  validator:   '0[1-9]|1[0-2]',
  cardinality: 2,
  prevalidator:
  [
    {
      validator:   '[0-1]',
      cardinality: 1,
    }
  ]
}
});
Inputmask.extendDefinitions(
{ 'B':
{
  validator:   '0[1-9]|[1-2][0-9]|3[0-1]',
  cardinality: 2,
  prevalidator:
  [
    {
      validator:   '[0-3]',
      cardinality: 1,
    }
  ]
}
});
Inputmask.extendDefinitions(
{ 'M':
{
  validator:   '1(89[7-9]|9[0-9][0-9])|2(0[0-9][0-9]|1([0-2][0-9]|3[0-7]))',
  cardinality: 4,
  prevalidator:
  [
    {
      validator:   '[1-2]',
      cardinality: 1,
    }, 
    {
      validator:   '1[8-9]|2[0-1]',
      cardinality: 2,
    }, 
    {
      validator:   '1(89|9[0-9])|2(0[0-9]|1[0-3])',
      cardinality: 3,
    }
  ]
}
});

It's important to note that I'm not using the normal date due to possible variances that appear based on culture, such as the separators, and the placement of year, month, and day. Year is also restricted to +/- 120 years from current year.

Version Used

The Version of the Input Mask used is 3.3.4

Known Affected Devices

1. Samsung Galaxy S5

[RobinHerbots]

Can you create a jsfiddle. So in desktop browser it behaves correctly while on mobile it doesn,ct?

Op ma 24 apr. 2017 17:07 schreef Allen Clark Copeland, Jr. < notifications@github.com>:

Inconsistent Behavior

The Input mask appears to behave differently on certain mobile devices than it does on traditional desktop systems.

An example: I have a language-specific date-pattern defined, based off of the originating culture from ASP.NET. On certain mobile devices the separator trivia appears to be required on the mobile devices, and trying to enter: MM/DD/YYYY as MMDDYYYY gives unpredictable and usually incorrect behavior.

The user can, on these devices, enter the separators and get a better experience. The issue with this is the inconsistency between devices. If a user tries one device and switches to another later, the behavior may result in these fields not being entered due to the confusion, the user may experience, of the inconsistency. Expected Behavior

Consistent Behavior across platforms. If the separator trivia is required, it should always be required. Actual Behavior

Attached is an example of the value: 11/11/1911, entered in two ways:

1. Without Entering Separator Trivia https://cloud.githubusercontent.com/assets/14880357/25343224/080c2932-28d4-11e7-946e-d622edf3f5fe.png
2. With Entering Separator Trivia https://cloud.githubusercontent.com/assets/14880357/25343223/07e856f6-28d4-11e7-9aa9-faeacce6bd98.png

Definitions

The HTML which defines the input is as follows:

The JavaScript defining D/B/M is as follows:

Inputmask.extendDefinitions( { 'D': { validator: '0[1-9]|1[0-2]', cardinality: 2, prevalidator: [ { validator: '[0-1]', cardinality: 1, } ] } }); Inputmask.extendDefinitions( { 'B': { validator: '0[1-9]|[1-2][0-9]|3[0-1]', cardinality: 2, prevalidator: [ { validator: '[0-3]', cardinality: 1, } ] } }); Inputmask.extendDefinitions( { 'M': { validator: '1(89[7-9]|9[0-9][0-9])|2(0[0-9][0-9]|1([0-2][0-9]|3[0-7]))', cardinality: 4, prevalidator: [ { validator: '[1-2]', cardinality: 1, }, { validator: '1[8-9]|2[0-1]', cardinality: 2, }, { validator: '1(89|9[0-9])|2(0[0-9]|1[0-3])', cardinality: 3, } ] } });

It's important to note that I'm not using the normal date variant due to possible variances that appear based on culture. Year is also restricted to +/- 120 years from current year. Version Used

The Version of the Input Mask used is 3.3.4

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/RobinHerbots/Inputmask/issues/1576, or mute the thread https://github.com/notifications/unsubscribe-auth/AATb77ONXGGdbzFBgCuW1RaZqBfyscpvks5rzLqlgaJpZM4NGTDS .

[AlexanderMorou]

Using v3.3.4

I ended up using exactly version 3.3.4, the 3.x (latest) actually behaves WORSE by not advancing past the first character entered!

This seems like a complicated issue. Edit: Updated links, removed extraneous javascript.

[SureshIndpro]

I am facing the same issue in Samsung Galaxy S7 with Android 7 (Nougat) in Chrome. The caret is placed in front even after 1 character is there.

[ErikWitkowski]

facing same problem here on Motorolla G3

[RobinHerbots]

Just an updated jsfiddle https://jsfiddle.net/jrp2evjt/4/

[ErikWitkowski]

Robin is it tested on android?

[RobinHerbots]

@ErikWitkowski ,

The problem is still there, the fiddle is just to test against the latest version.

[ErikWitkowski]

Is there an easy way to make the mask MMDDYYYY when editing and then switch back to MM/DD/YYYY when control lose focus? That would work it around

[AlexanderMorou]

@ErikWitkowski The issue with that approach is it wouldn't really solve the issue. Further, depending on the mask, the delimiters are used to help the user reason about the mask they are seeing.

[s-chizhik]

Hi all. I've faced this issue too. Device: Galaxy Tab A (2016). Usage:

<input type="tel" name="phone" class="form-input" id="phone">
...

Inputmask({
    mask: '+38 (999) 999-99-99'
})
.mask('#phone');

Is there any solution or maybe workaround for it?

UPD Issue reproduces in Chrome (v59) browser but not in default Samsung browser

[jgerstle]

I'm seeing the same issue with just a regular regex expression. I have a regex to only allow hex characters, but it doesn't seem to grab characters in the mask. This seems to work fine when the first character is a number, but when it's a letter it breaks entirely. Here is the code I'm using: Inputmask({ regex: '([0-9]|[A-F])', repeat: this.quantity, jitMasking: true, casing: 'upper' }).mask(this.input);

[mattsones]

@RobinHerbots any updates on this since Sept 2017? We seem to be having similar issues to those posted here with some new android tablets running chrome, with a phone number mask.

[Brookd23]

Is this fixed?