Press Backspace on real keyboard not working right based on my keyboard setup (from virtual keyboard is working fine)

[rizkicahyana]

Hallo @Mottie and Team!
Thank you for developing such great virtual keyboard. I'm really helped by Mottie Keyboard. I'm sorry for disturbing you here.

Right now, I'm facing some problem, either there's issue on my script or the wrong order of css and js file on my own.

Would you like to see through this problem? I reproduce the code on pen here: https://codepen.io/rizkicahyana/pen/eMYMKG

According to the demo, there's typing smoothly either on input type e-mail or password. But, when I press the backspace button on the real/actual keyboard, two character were removed on input type email. It should be only one character removed when I press backspace once, right? The behaviour on input type password was working fine either on real or virtual keyboard. Both of the input are working fine if I press backspace on virtual keyboard.

I'm using the setup like this:
$('.keyboard').keyboard({
layout: 'custom',
customLayout: {
'normal': [
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
'{tab} q w e r t y u i o p [ ] \',
'a s d f g h j k l ; ' {enter}',
'{shift} z x c v b n m , . / {shift}',
'{sp:.1} {space} {sp:.1}'
],
'shift': [
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
'{tab} Q W E R T Y U I O P { } |',
'A S D F G H J K L : " {enter}',
'{shift} Z X C V B N M < > ? {shift}',
'{sp:.1} {space} {sp:.1}'
]
},
position: {
of: $(window),
my: 'center bottom',
at: 'center bottom',
at2: 'center bottom'
},
alwaysOpen: true,
initialFocus: false,
usePreview: false,
autoAccept: true,
tabNavigation: true
});

Thank you for your attention.

Regards,
Rizki Cahyana

[Mottie]

Hi @rizkicahyana!

The problem you're encountering is actually due to the browser not supporting caret positioning on input types email and number. You can get more details from the first entry under "Known Problems" in the main readme - https://github.com/Mottie/Keyboard#known-problems.

The only solution would be to not use those unsupported input types.

[Mottie]

Also, you might want to check out this blog post - https://codepen.io/kevinSuttle/post/the-current-state-of-web-forms - about halfway down the page you'll see a better email validation pattern to use instead of the default pattern used by the email type input.

[rizkicahyana]

Thank you for your respond and explanation. My bad, I'm sorry, I didn't read the "Known Problems" section carefully.

Okay, I'll be using another type input to fix it.

Once again, thank you for the quick respond. Wish you have a good day @Mottie !

[rizkicahyana]

I'm sorry for reopening this.
Even though the type input changed to 'text', the backspace from actual/real keyboard still removed two character at once. The 'password' type input sometimes removed two character too.

Would you like to see this? I've edited the pen: https://codepen.io/rizkicahyana/pen/eMYMKG

Thank you.

[Mottie]

Ahh, ok I see it now. It has something to do with setting the combination of initialFocus: false and alwaysOpen: true. I'll look into it further.

[rizkicahyana]

Thank you for your respond and attention to this @Mottie. I'm waiting for it.

[Mottie]

This has been fixed in the master branch, but I want to hold off on a new release until I get some time to fix #658.

[rizkicahyana]

Thank you for fixing it @Mottie.