Inputmask: Numerica mask not run in Galaxy S5 + Chrome + Android

[mbraz]

The mask above run perfect in iPhone and desktop browser! but in Galaxy S5 + Chrome + Android not run correct. Inserting the value 123 the input display 321.

<input type="text" class="form-control" id="{$id}" name="{$id}" value="{$value}" maxlength="6"
    data-inputmask-mask="9[99999]"
    data-inputmask-clearmaskonlostfocus="true"
    data-inputmask-showmaskonfocus="false"
    data-inputmask-showmaskonhover="false" 
    data-inputmask-greedy="false"  />

Thanks!

[gersteba]

Same with Chrome Browser on Samsung Galaxy Note 8 in Mobile View (Android 4.4.2, Chrome 52.02743.98) and on Motorola X2 both in Mobile and in Desktop-View (Android 6.0.0, Chrome 52.0.2743.98).
On Galaxy Note 8 in stock browser it works right.

Even with characters this issue occurs:
https://jsfiddle.net/gersteba/tzLa2oy9/20/

Additionally:
When I enter more than three characters at the beginning, the existing ones are overwritten.

[dmikester1]

I am having this issue too! Samsung Galaxy S4 Mini, Android 4.4.2, Chrome. I was having this exact same issue when using the Bush Masked Input plugin too. And there were several "issues" about it on Github for that plugin as well.

[AliveDD]

+1 on device: galaxy a5, android 5, chrome
see video: (40mb) https://www.dropbox.com/s/m62t3i2wlty924a/IMG_3752.MOV?dl=1

[RobinHerbots]

@AliveDD ,

Can you retry the same but with inputEventOnly: true as extra option and in "desktop" chrome.

Is the bug reproducable?

[RobinHerbots]

@AliveDD ,

It is reproduceable. with the inputEventOnly: true.

Great this means it is solvable.

[gersteba]

@RobinHerbots :
I just tried it on the desktop version of Chrome, and yes, it is reproducable, yes.
Please have a look at this fiddle:
https://jsfiddle.net/gersteba/tzLa2oy9/22/
Also in IE, Edge and Firefox.

Can you confirm this?

Kind regards,
Gerald

[AliveDD]

@gersteba
url 404

[AliveDD]

@RobinHerbots
im add this key

and problem don't solved on Android, and appeared on Desktop

[gersteba]

@AliveDD :
Now the fiddle is corrected above.

[RobinHerbots]

@gersteba ,

Yep, I can confirm.

[RobinHerbots]

@AliveDD ,

Offcourse, the idea was to see if we have then the same problem in the desktop version as in the android one. Android uses the inputfallback to mask in most cases.

[RobinHerbots]

@gersteba ,

I pushed a patch

[gersteba]

@RobinHerbots :
Thanks.
I tested it. The only thing, that seems to work now, is, that the caret is moving to the right now.
But:

• When I input characters only, the number digits are filled with blanks.
• The caret does not jump over the minus signs.
• On pressing backspace, the caret moves to the left once too often and strange behaviour follows on typing afterwards.

I guess comprehensive testing will be necessary, too.

[RobinHerbots]

@gersteba ,

Yep, I didn't say it was all solved.

I guess it would be best to put the different cases into the unit tests. That will be the only way to really make it work for al scenarios.

[AliveDD]

i can help simple test it, but i need a dist-code

[RobinHerbots]

@AliveDD ,

It would be really helpfull if someone contributed to the unittests with different cases which son't work on android and in the desktop browser with inputEventOnly

[mbraz]

Hi guys, have a data attribute?

data-inputmask-**inputeventonly**="true"
/>

[AliveDD]

:( zzz

[RobinHerbots]

@AliveDD ,

aw, yoiu actually saw me falling asleep ;-)

If you want to help see my previous comment.

Inputmask/qunit/tests_inputeventonly.js

[gersteba]

I am a GitHub novice.
Isn't my fiddle of help doing tests?
Please exactly write, what tests need to be done and how.
Thank you!

Kind regards,
Gerald

[RobinHerbots]

@gersteba ,

Yes the jsfiddle helps alot. But it would help even more, when there are unittest for every failure.

Have a look at Inputmask/qunit/tests_inputeventonly.js

[gersteba]

Hi!

What are 'unittests'?

Kind regards,
Gerald

Am 12.09.2016 08:56 schrieb "Robin Herbots" [email protected]:

@gersteba https://github.com/gersteba ,

Yes the jsfiddle helps alot. But it would help even more, when there are
unittest for every failure.

Have a look at Inputmask/qunit/tests_inputeventonly.js

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/RobinHerbots/Inputmask/issues/1357#issuecomment-246263749,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AL7r4Ao_wQOkS-rUyLHcNVlIrZqgaH-Uks5qpPelgaJpZM4JgvqR
.

[RobinHerbots]

@gersteba ,

Just google around, you will find enough info about it.

[gersteba]

@RobinHerbots :

I really would like to help making Inputmask run correctly.
But as a complete GitHub novice I am sorry, that I have no clue, what to do.
Please give me instruction, how to help.

Kind regards,
Gerald

[RobinHerbots]

@gersteba,

Just try the mask above on an android device. Note down all issues. Retry the same with the mask mentioned above but you add the data-inputmask-inputeventonly="true" attribute on the input element and test it on desktop chrome. If you still have the same issue.
do:
You fork the inputmask repo. (see how on github)
Create a unittest for the issue(s) in qunit/tests_inputeventonly.js. (see inside for examples)
submit a pull request (see how on github)
done

If this sounds too difficult, ...
create a unittest based on the examples in qunit/tests_inputeventonly.js and post them here as a comment

[RobinHerbots]

@gersteba , @AliveDD ,

Can you have some tests with the latest version from github

[AliveDD]

this?

[RobinHerbots]

@AliveDD ,

Yep, that's ok

[AliveDD]

@RobinHerbots , all right! works nicely

[RobinHerbots]

@AliveDD ,

You tested it on a Galaxy S5?

[gersteba]

@RobinHerbots :

Now I tested it now on the Samsung Galaxy Note 8 in Chrome and in stock browser
https://jsfiddle.net/gersteba/tzLa2oy9/24/
Chrome: Type some alphanumerical characters; as soon as the first three digits would be full, they are deleted. But beginning with i.e. DD4, the field can be filled correctly.
Stock: Typing invalid characters fills the field with blanks. And after jump over the first minus sign, the carret moves one digit back.

Is that of use for you?

Kind regards,
Gerald

[RobinHerbots]

@gersteba ,

Did you use your jsfiddle for testing? https://jsfiddle.net/gersteba/tzLa2oy9/22/

[gersteba]

@RobinHerbots :

No, the one I posted instead.

[RobinHerbots]

@gersteba ,

It is the predictive text provisioning. See #465

[RobinHerbots]

@gersteba ,

Can you do a test with a numeric mask.

[gersteba]

@RobinHerbots ,

https://jsfiddle.net/gersteba/tzLa2oy9/26/
Chrome browser: Works well with numeric mask.
Stock browser: Same behaviour with numeric mask.

[AliveDD]

@RobinHerbots
successfully tested on

1. ASUS Z00LD (Android 6.0.1)
2. Samsung Galaxy S5 (Android 6.0.2)

[RobinHerbots]

@gersteba ,

So for this issue (numeric mask)
Chrome seems fixed,
Stock browser still fails .

[RobinHerbots]

@gersteba ,

When I test on a stock browser Galaxy note 4 (browserstack) everything seems to work.

[gersteba]

@RobinHerbots ,

https://jsfiddle.net/gersteba/tzLa2oy9/26/:
The second input box with the numbers only mask works well.
The first one with 'XXX-9999-9999-XXX-XXX' mask: No improvement (see https://github.com/RobinHerbots/Inputmask/issues/1357#issuecomment-246692232)
I also tested it on the Motorola X2 phone.

[gersteba]

In view of me being a GitHub novice - how can I help more to make the Inputmask plugin run on all devices?

[RobinHerbots]

@gersteba ,

There is no need to have knowledge of github.
What can help.
Choose your mobile device.

Pick some mask like those above. Have a test with a specific browser.

Try the masks with predictive text provisioning disabled. and retry with predictive text provisioning enabled. When you find a problem create an issue with the mask used, device, browser, versions.

Or you can investigate if there is a way we can influence the predictive text.

[gersteba]

@RobinHerbots ,

How do I disable/enable the predictive text provisioning?

EDIT: I see - you mean the keyboard settings on the device, not a parameter of Inputmask ;)

[RobinHerbots]

@gersteba ,

Android settings => keyboard

[time-wcrp]

Try do remove attribute "maxlength"

[RobinHerbots]

@watcharaphong ,

Can you explain a bit more?

[gersteba]

@RobinHerbots ,

I created a new fiddle:
https://jsfiddle.net/gersteba/tzLa2oy9/27/

Here are my first results of testing the first input field 'sccode' on a Samsung Galaxy Note 8 (GT-N5110, Android-Version 4.4.2, Kernel-Version 3.0.31-1837841 dpi@SWDD5611 number 1, Build number KOT49H.N5110XXDNF1).
Browsers:

• Chrome v52.0.2743.98
• Stock browser v4.4.2_N5110XXDNF1

With predictive text provisioning enabled:

• Chrome (Desktop/Mobile View):
  Type some alphanumerical characters; as soon as the first three digits would be full, they are deleted. But beginning with i.e. DD4, the field can be filled correctly.
• Stock (Desktop/Mobile View):
• Typing invalid characters fills the field with blanks.
• After jump over each minus sign, the caret moves one more digit back.

With predictive text provisioning disabled:

• Chrome (Desktop/Mobile View):
  Works like a charm!
• Stock (Desktop/Mobile View):
• Typing invalid characters fills the field with blanks.
• After jump over each minus sign, the caret moves one more digit back.

This evening I will make the same tests on a Motorola X2 mobile phone.

[RobinHerbots]

@gersteba ,

Thx for the feedback. Can you create a news issue for the stock browser. Put a ref to this issue.

[gersteba]

@RobinHerbots ,

Here are my second results of testing the first input field 'sccode' - this time on a Motorola X 2. Generation (Android-Version 6.0, Kernel-Version 3.4.42-ga9982b3-00002-g389e46b hudsoncm@ilclbld33 number 1, Build number MPE24.49-18).
Browsers:

• Chrome v52.0.2743.98

With predictive text provisioning enabled:

• Chrome (Desktop/Mobile View):
  Type some alphanumerical characters; as soon as the first three digits would be full, they are deleted. But beginning with i.e. DD4, the field can be filled correctly.

With predictive text provisioning disabled:

• Chrome (Desktop/Mobile View):
  Works like a charm!

So I guess the wrong behaviour has nothing to do with the device, nor with the Android version, but with the predictive text provisioning - as you already mentioned.
Are these test results of use for you?

[RobinHerbots]

@gersteba ,

Thx for the info.

I finally found a device where I can reproduce the behavior you describe.

With predictive text provisioning enabled:

Chrome (Desktop/Mobile View): Type some alphanumerical characters; as soon as the first three digits would be full, they are deleted. But beginning with i.e. DD4, the field can be filled correctly.

[gersteba]

@RobinHerbots ,

Great - this makes me optimistic, that the plugin will work soon.

[dmikester1]

I'm glad to hear this as well! Thank you for your all your hard work RobinHerbots! Looking forward to being able to use this once again on my site for Androids.

[RobinHerbots]

@gersteba , @dmikester1 ,

Hmm, don't get overexited.
The predictive text will always be patchwork as I see no way to really control it.
I hope that the different browsers wil implement the inputmode attribute someday, which will resolve this.

Anyway, I found that the behavior you describe comes from the Google keyboard. This means that the behavior of the predictive text changes depending the keyboard used on the device.

[RobinHerbots]

Ok I found a possible solution for predictive text on android. Currently too soon for testing. But now I get optimistic 😀

[gersteba]

@RobinHerbots ,

that sounds great - I am very excited now ;)

[RobinHerbots]

@gersteba ,

Can you have a test with https://jsfiddle.net/tzLa2oy9/35/ and predictive text on.

[gersteba]

@RobinHerbots ,

wow - typing in Chrome works like a charm now - you are a hero!
The only thing that is not working now, is pasting a valid string.

BTW: The stock browser's behaviour did not improve.

[RobinHerbots]

@gersteba ,

There is also a problem with positioning the caret when tapping into the input.

[gersteba]

@RobinHerbots ,
the ticket is closed now?
Is the issue fixed then?
Kind regards,
Gerald

[RobinHerbots]

@gersteba ,

What else is to be fixed? For the stockbrowser you need to open another issue as I asked before.

[gersteba]

@RobinHerbots ,

There is also a problem with positioning the caret when tapping into the input.

By the way - I don't know, what has changed, but the former behaviour is back now:

Chrome (Desktop/Mobile View): Type some alphanumerical characters; as soon as the first three digits would be full, they are deleted. But beginning with i.e. DD4, the field can be filled correctly.

I meant "alpha characters", not "alphanumerical" ;)
Please try your fiddle https://jsfiddle.net/tzLa2oy9/35/.

[RobinHerbots]

@gersteba ,

You should read the android readme
https://jsfiddle.net/tzLa2oy9/54/

[gersteba]

@RobinHerbots ,

I tried your latest version - and it seems to work now!
Thank you!

[dmikester1]

Wow, thank you for your hard work in getting to the root of the issue and implementing a fix! So you are saying when we see all green across the bottom here, you will be able to implement a less hacky fix?

[RobinHerbots]

@dmikester1 ,

Correct ;-)