Backspace does not work when deleting beyond a separator character on Android Chrome

[andrewrota]

Demo: http://jsfiddle.net/Tpr6N/2/

JS Code:

$(document).ready(function () {
    $(".input").inputmask({
       "mask": "***-***"
    });
});

Steps to reproduce:

1. Touch input field to open keyboard
2. Touch '1' on keyboard. Touch '2' on keyboard. Touch '3' on keyboard. Touch '4' on keyboard.
3. Touch 'backspace' on keyboard. The '4' character is erased as expected.
4. Touch 'backspace' on keyboard again. No character is erased and the cursor does not move. Touch 'backspace' again and again and the cursor still does not move or erase any of the earlier characters. It is stuck.

Device: Nexus 5
OS: Android 4.4.2
Browser: Chrome
User Agent String: Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36

[RobinHerbots]

@andrewrota,

Ok I got ya, ... you want support for android browsers ;-)

I made a new jsfiddle http://jsfiddle.net/Tpr6N/14/

Can you enter some chars and delete them, and send the output to me.

On my tablet with Android 4.2.1 Chrome Browser I got input keydown keyup as events. The input is changed on the input event. Can you test it also on Chrome and on the stock browser.

Thx

Robin

[andrewrota]

When entering 1 2 3 4 and then deleting them:

keydown keypress input 1 keyup 1 keydown 1 keypress 1 input 12 keyup 12 keydown 12 keypress 12 input 123 keyup 123 keydown 123 keypress 123 input 1234 keyup 1234 input 123 input 12 input 1 input

This is on Chrome on Nexus 5, which only has Chrome as the default browser.

Thanks again for all your help with this.

[RobinHerbots]

Hi Andrew,

Can you send also the useragent, thx.

Very strange, ... chrome on my tablet never fires the keypress and also the
order is different.

2014-01-25 Andrew Rota [email protected]

When entering 1 2 3 4 and then deleting them:

keydown keypress input 1 keyup 1 keydown 1 keypress 1 input 12 keyup 12 keydown 12 keypress 12 input 123 keyup 123 keydown 123 keypress 123 input 1234 keyup 1234 input 123 input 12 input 1 input

This is on Chrome on Nexus 5, which only has Chrome as the default browser.

Thanks again for all your help with this.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/418#issuecomment-33301408
.

[andrewrota]

Yes, this is the same useragent as the one I reported eariler:

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36

[andrewrota]

And here are some other results on another device (Galaxy SII) for that JSFiddle:

Device: Samsung Galaxy SII SAMSUNG-SGH-I777
Android Version: 4.0.3
Browser: Chrome
User agent: Mozilla/5.0 (Linux; Android 4.0.3; SAMSUNG-SGH-I777 Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19
Result:

keydown keypress input 1 keyup 1 keydown 1 keypress 1 input 12 keyup 12 keydown 12 keypress 12 input 123 keyup 123 keydown 123 keypress 123 input 1234 keyup 1234 keydown 1234 input 123 keyup 123 keydown 123 input 12 keyup 12 keydown 12 input 1 keyup 1 keydown 1 input keyup

Device: Samsung Galaxy SII SAMSUNG-SGH-I777
Android Version: 4.0.3
Browser: Android Browser
User agent: Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; SAMSUNG-SGH-I777 Build/IML74K) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Result:

keydown keypress input 1 keyup 1 keydown 1 keypress 1 input 12 keyup 12 keydown 12 keypress 12 input 123 keyup 123 keydown 123 keypress 123 input 1234 keyup 1234 keydown 1234 input 123 keyup 123 keydown 123 input 12 keyup 12 keydown 12 input 1 keyup 1 keydown 1 input keyup keyup

[andrewrota]

And another (Galaxy S4):

Device: Samsung Galaxy S4 SCH-I545
OS: Android 4.2.2
Browser: Chrome
User Agent String: Mozilla/5.0 (Linux; Android 4.2.2; SCH-I545 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Mobile Safari/537.36
Results:

input 1 keydown 1 keyup 1 input 12 keydown 12 keyup 12 input 123 keydown 123 keyup 123 input 1234 keydown 1234 keyup 1234 input 123 keydown 123 keyup 123 input 12 keydown 12 keyup 12 input 1 keydown 1 keyup 1 keydown 1 input keyup

(above results may also be relevant for #421)

Device: Samsung Galaxy S4 SCH-I545
OS: Android 4.2.2
Browser: Android Browser
User Agent String: Mozilla/5.0 (Linux; Android 4.2.2; en-us; SAMSUNG SCH-I545 Build/JDQ39) AppleWebKit/535.19 (KHTML, like Gecko) Version/1.0 Chrome/18.0.1025.308 Mobile Safari/535.19
Result:

input 1 keydown 1 keyup 1 input 12 keydown 12 keyup 12 input 123 keydown 123 keyup 123 input 1234 keydown 1234 keyup 1234 input 123 keydown 123 keyup 123 input 12 keydown 12 keyup 12 keydown 12 input 1 keyup 1 input keydown keyup

(above results may also be relevant for #416)

[RobinHerbots]

@andrewrota,

Thx for the info. Now we have some more inside of which events occur and in which sequence.

I made a new fiddle to test with http://jsfiddle.net/Tpr6N/15/. In this fiddle we test the ability to block an event.
Can you also send the output.

[RobinHerbots]

http://jsfiddle.net/UJvN7/ (to test on Nexus 5 (chrome 32)

[andrewrota]

On the last jsfiddle the input gets added before the mask, pushing the mask forward as you type. (Nexus 5, Chrome).

[andrewrota]

For http://jsfiddle.net/Tpr6N/15/ on the nexus 5 Chrome:

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36 => keydown keyup keydown keyup keydown keyup keydown keyup

[RobinHerbots]

Can you retest the fiddle on the nexus5. The event binding was wrong.

[andrewrota]

http://jsfiddle.net/UJvN7/, retested on Nexus 5 Chrome:

Characters input fine but when you start deleting them you also delete the separator character (the dash) and the masking does not re-appear as you delete. Then when you leave (lose focus on) the field and click back into the field the characters re-appear as if they were never deleted.

[RobinHerbots]

It is not easy to implement without having the device ;-)

Can you send the output of http://jsfiddle.net/Tpr6N/20/

[andrewrota]

Nexus 5 Chrome:

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36 => keydown caret: {0,0} keypress caret: {0,0} input 1 caret: {1,1} keyup 1 caret: {1,1} keydown 1 caret: {1,1} keypress 1 caret: {1,1} input 12 caret: {2,2} keyup 12 caret: {2,2} keydown 12 caret: {2,2} keypress 12 caret: {2,2} input 123 caret: {3,3} keyup 123 caret: {3,3} keydown 123 caret: {3,3} keypress 123 caret: {3,3} input 1234 caret: {4,4} keyup 1234 caret: {4,4} input 123 caret: {3,3} input 12 caret: {2,2} input 1 caret: {1,1} input caret: {0,0}

[RobinHerbots]

@andrewrota ,

Thx! I know I ask much.

Can you retest with http://jsfiddle.net/UJvN7/

[andrewrota]

I get an alert when deleting past the separator:

yihaaa 123___ 123-___ 3

[andrewrota]

And thank you again for all your help with these issues. I know it's a pain to debug without the actual devices.

[RobinHerbots]

Great you got the alert.

Can you have another test, ... this should work now.

[andrewrota]

It does work! The one behavior that is strange/unexpected though is that when you have the cursor at the character past the dash, and then hit delete, the first thing it does is delete the dash rather than deleting the number before the dash. Deleting further works as expected though.

[RobinHerbots]

Can you explain the strange/unexpected a bit more. Maybe with some examples.

[andrewrota]

1. Press '1', press '2', press '3', press '4'. Current state: 123-4|__ (Cursor shown by '|' character)
2. Press delete. Current state: 123-|___
3. Press delete again. Current state: 123|___ [Expected state is 12|-__]
4. Press delete again. Current state: 12|-__. Now it's back to normal.

[andrewrota]

Also, I've been testing with the second field on that fiddle. With the first field there is one problem: the first time in the input field when you add any character past the separator you can't delete (pressing delete does nothing and doesn't move the cursor). But if you lose focus on the field and then go back into the field, it works fine. I'm not able to reproduce this behavior on the second field in the jsfiddle.

[RobinHerbots]

Can you have another test

http://jsfiddle.net/UJvN7/

[andrewrota]

Same behavior.

[RobinHerbots]

did you got an alert?

[andrewrota]

Just tried again; received alerts this time:

1. Press '1', press '2', press '3', press '4'. Current state: 123-4|__ (Cursor shown by '|' character)
2. Press delete. Current state: 123-|___
3. Press delete again. Alert "hello keydown". Another alert "12_-___". Current state:

12|_-___

(I believe this is the expected state at this point)

[RobinHerbots]

That looks good, ... the last test. without alerts

[andrewrota]

I tried it again. No alerts this time and the behavior is back to before the alerts were there:

1. Press '1', press '2', press '3', press '4'. Current state: 123-4|__ (Cursor shown by '|' character)
2. Press delete. Current state: 123-|___
3. Press delete again. Current state: 123|___ [Expected state is 12|-__]
4. Press delete again. Current state: 12|-__. Now it's back to normal.

[RobinHerbots]

There was an error, ... can you try again (the last test for now, ...)

[andrewrota]

Seems to work!

The bug I mentioned above (#418 (comment)) is still there, but that may be unrelated. It only happens when I input letters rather than numbers.

[RobinHerbots]

@andrewrota,

The link to the comment doesn't show exactly, ... which bug exactly?

[andrewrota]

So when you input letters (not numbers) into the field it doesn't allow you to delete (the cursor doesn't move when you press delete). However, when you leave the field and go back into it, it works fine.

EDIT: I tested this in the current plugin as is and it's present there so this is a distinct bug that I'll log elsewhere.

[RobinHerbots]

I updated chrome on my tablet to version 32 and experience the same behavior on the second mask.
Problem is that I cannot enable remote debugging somehow? , ... need to figure out on a Toshiba Excite A10-A-104

The stock browser seems to work out of the box. But that we will handle in #416 & #368

[RobinHerbots]

Ha enable developers setting on jellybean is by tapping 7 times on the build version in the about menu

[andrewrota]

Ah, yes I remember reading about that. Let me know if I can help by running any other debugging tests with other devices for this issue or #416 or #421.

[RobinHerbots]

I first want to solve the ***-*** on android chrome32 as the problem does not occur on other browsers.
Next will be android chrome18 & chrome29 (event input keydown keyup)

If you want you may already test http://jsfiddle.net/Tpr6N/15/

[andrewrota]

Sure. On http://jsfiddle.net/Tpr6N/15/: Pressing a b c 1 2 3 and then pressing delete until the input is clear yields this result on a Nexus 5 Chrome:

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36 => input a keydown a keyup a input ab keydown ab keyup ab input ab keydown ab keyup ab input abc keydown abc keyup abc input abc1 keydown abc1 keyup abc1 input abc1 keydown abc1 keyup abc1 input abc12 keydown abc12 keyup abc12 input abc123 keydown abc123 keyup abc123 input abc12 keydown abc12 keyup abc12 input abc1 keydown abc1 keyup abc1 input abc keydown abc keyup abc input abc keydown abc keyup abc input ab keydown ab keyup ab input ab keydown ab keyup ab input a keydown a keyup a input keydown keyup

[RobinHerbots]

No no not on the Nexus 5, I need it for a device with android chrome
version 18 or 29 ;-)

2014-01-28 Andrew Rota [email protected]

Sure. On http://jsfiddle.net/Tpr6N/15/: Pressing a b c 1 2 3 and then
pressing delete until the input is clear yields this result on a Nexus 5
Chrome:

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Mobile Safari/537.36 => input a keydown a keyup a input ab keydown ab keyup ab input ab keydown ab keyup ab input abc keydown abc keyup abc input abc1 keydown abc1 keyup abc1 input abc1 keydown abc1 keyup abc1 input abc12 keydown abc12 keyup abc12 input abc123 keydown abc123 keyup abc123 input abc12 keydown abc12 keyup abc12 input abc1 keydown abc1 keyup abc1 input abc keydown abc keyup abc input abc keydown abc keyup abc input ab keydown ab keyup ab input ab keydown ab keyup ab input a keydown a keyup a input keydown keyup

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/418#issuecomment-33494204
.

[andrewrota]

Ah ok I'll test those next.

[andrewrota]

On http://jsfiddle.net/Tpr6N/15/ with a Nexus S4, Chrome browser: Press 1, press 2, press 3. Press delete. Press delete again (interestingly it deleted two characters when I pressed delete the second time.

Result:

Mozilla/5.0 (Linux; Android 4.2.2; SCH-I545 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.72 Mobile Safari/537.36 => input 1 keydown 1 keyup 1 input 12 keydown 12 keyup 12 input 123 keydown 123 keyup 123 input 12 keydown 12 keyup 12 keydown 12 input keyup

[andrewrota]

On http://jsfiddle.net/Tpr6N/15/ with a Nexus S2, Chrome browser: Press 1, press 2, press 3. Press delete. Press delete again. Press delete again. No characters were inputted at all during this test. The input field remained empty.

Result:

Mozilla/5.0 (Linux; Android 4.0.3; SAMSUNG-SGH-I777 Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19 => keydown keyup keydown keyup keydown keyup keydown keyup keydown keyup keydown keyup

[RobinHerbots]

incredible!! the events triggered depends on the inputkind??!
for numeric input in chrome32 you get keydown keypress input keyup
for non numerics keydown input keyup
for backspace you get input
and sometimes it's stuck caused by caret positioning I guess.

All should work besides the caret who get stuck sometimes.

[RobinHerbots]

Hi andrew,
I added chrome 18 & 29. Can you have a test with http://jsfiddle.net/UJvN7/

[andrewrota]

(re http://jsfiddle.net/UJvN7/) So for the S2 (Chrome 18) the backspace issue is fixed, but there are two other strange behaviors:

1. On the first input with the mask 999-aaa: if you enter letters at first the expected behavior is that it just doesn't let you input the non-number characters, but the actual input is the cursor disappears and a second line begins to appear underneath the mask _-_ characters as you type.
2. On the second input with the mask _-_ you can enter the first four characters fine, but when you enter the fifth character it duplicates the previous character and adds it in the sixth position. So inputting a --> b --> c --> d results in the following in the input field: abc-ded

[RobinHerbots]

@andrewrota ,

It has also something todo with the autocorrection in android I think. There is a simular behavior on Chrome32 for the second issue.

To be continued ....

[RobinHerbots]

See #416