iPhone numeric keyboard not working - Keyboard: 日本語 かな入力 (Japanese Kana)

[komitake]

• It seems not working if I input by iPhone numeric keyboard.
• No problem on Android device for me.
• Attached reproduction video on Demo site
• OS: iOS 14.7.1
• Browser: Safari
• Inputmask version

https://user-images.githubusercontent.com/3639478/133979959-7871b0a5-f672-48f9-8855-a76fdd4dd463.MP4

[RobinHerbots]

@komitake ,

Can this be reproduced on browserstack? I tested on browserstack Iphone 11 ios 14 safari and see no problem.

On which iphone are you testing?

[komitake]

@RobinHerbots I'v tested with my real device.

I noticed that it's depending on the keyboard kind.

My setting is.. iPhone Settings -> General -> Keyboard: 日本語 かな入力 (Japanese Kana) iPhone Settings -> General -> Language & Region > iPhone Language: 日本語 Japanese

If I change either setting then the issue won't happen. changed Keyboard to English (US) changed Language to English (I suppose English keyboard is used automatically when Language is changed to English)

[RobinHerbots]

@komitake ,

Probably the definitions needs to be extended for Japanese Kana.

Currently

export default {
    "9": { //\uFF11-\uFF19 #1606
        validator: "[0-9\uFF10-\uFF19]",
        definitionSymbol: "*"
    },
    "a": { //\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5 #76
        validator: "[A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]",
        definitionSymbol: "*"
    },
    "*": {
        validator: "[0-9\uFF10-\uFF19A-Za-z\u0410-\u044F\u0401\u0451\u00C0-\u00FF\u00B5]"
    }
}

[Hoshinokoe]

@RobinHerbots , It reproduces on iPad with chinesse keyboard. If switching keyboard to english, everything is working fine.

General -> Language & Region > iPad Language: English General -> Keyboard: Chinese, Traditional (Hong Kong)

iOS version: 15.1 Browser: Safari Inputmask version: 5.0.6

[Hoshinokoe]

@RobinHerbots ,

I found that keypress event not fired on iOS mobile devices for Janapanese, Korean and Chinese keyboards.

https://developer.apple.com/forums/thread/61607

[RobinHerbots]

@Hoshinokoe ,

For mobile devices I rely on the input event and not the keypress event.

Can you have a try by forcing the input event. Add the inputEventOnly: true option.

[Hoshinokoe]

@RobinHerbots ,

inputEventOnly: true solves the issue. This setting should be added into documentation.

[RobinHerbots]

@Hoshinokoe ,

Can you send me some info about the sequence of events which get fired, and also the value of the keyCode property of the events.

[RobinHerbots]

@Hoshinokoe ,

I am especially interested in the keyCode value of the keyup and keydown event.

[Hoshinokoe]

@RobinHerbots

only keyup and keydown events ? You can provide debug version of your script and then I can back with results.

[RobinHerbots]

@Hoshinokoe ,

You can use this https://codepen.io/robinherbots/pen/rNYrpzJ

[Hoshinokoe]

@RobinHerbots,

Chinese keyboard:

https://user-images.githubusercontent.com/6155797/155785307-c5a5560b-95d2-4a80-958a-e5e5a99436af.MP4

Italian keyboard:

https://user-images.githubusercontent.com/6155797/155785353-fee571d6-c80f-41cf-8c19-8ff6ad5786dc.MP4

[RobinHerbots]

@Hoshinokoe ,

Can you repeat the test while typing "abc" Thx, Robin

[Hoshinokoe]

@RobinHerbots ,

No sense to do that. Chinese don't have "abc". For italian/english it will the same as "123".

[RobinHerbots]

@Hoshinokoe ,

Ok, I pushed a new version. Can you have a try with it?

[Hoshinokoe]

@RobinHerbots Cursor jumps through one position and it allows to input more then required.

<script src="https://rawgit.com/RobinHerbots/Inputmask/5.x/dist/jquery.inputmask.js"></script>
<script>
    $(document).ready(function(){
    $('input[type="text"]').inputmask({ mask: "99-99-99-99"});
});
</script>

https://user-images.githubusercontent.com/6155797/156038090-73239017-29f5-48a9-a7c6-758d7ceda1d6.mp4

[RobinHerbots]

Can I emulate this somewhere online?

[Hoshinokoe]

@RobinHerbots , its good question. Browserstack has small amount of supported keyboard languages (https://www.browserstack.com/question/566). I tested this issue on real device.

[Chuli2k]

Ran into the same issue on iPhone with iOS 15.4.1. Setting inputEventOnly: true solved the issue.

While debugging I found that the issue seems to be the keycode value on the keyboard event. While pressing numbers on Chinese keyboard the keycode is always 229. From what I found from browsing the code, that keycode is always ignored.

Here's a screengrab of the keyboard event values in keydown event:

[xisabao]

Hi @RobinHerbots, I implemented this fix (inputEventOnly: true) but now I'm having issues with being able to clear input fields. As you can see in the video below, now, with this option set, if you try to select all the text and hit delete to clear all of it, there is always the last character left in the input field and the field is not registered as being "cleared." This behavior doesn't occur with inputEventOnly: false. Is there any option to have the Chinese/Japanese/etc. keyboards work but also not have this issue with clearing occur? Thanks.

https://user-images.githubusercontent.com/12002452/178832237-2076aab6-aef2-4b2c-814b-12c352aface4.mov