Mottie / Keyboard

Virtual Keyboard using jQuery ~
http://mottie.github.io/Keyboard/
Other
1.77k stars 722 forks source link

Is there a way to hide the iOS form assistant? #733

Open taagidff opened 5 years ago

taagidff commented 5 years ago

environment: iPhone 6 iOS 12.2 react: 16.4.0 WKWebView (WebKit 2.0) react-virtual-keyboard: 1.0.2

Hi We are developing hybrid apps using React and Webview. The iOS form assistant is displayed at the bottom of the virtual keyboard.

Is there a way to hide the iOS toolbar? Keyboard options are as follows.

options = 
{
      type: "input",
      layout: 'numpad',
      lockInput: true,
      customLayout: {
        normal: [
          '7 8 9 {c}',
          '4 5 6 {clear}',
          '1 2 3 {b}',
          '0 00 000 {a}'
        ]
      },
      caretToEnd: true,
      autoAccept: true,
      appendLocally: false,
      color: "light",
      initialFocus: true,
      inactive: true,
      display: {
        'a': '<i class="accept">accept</i>',
        'c': '閉じる:閉じる (Esc)',
        "b": "&#8592;"
}

virtual keyboard

Mottie commented 5 years ago

Hi @taagidff!

Sorry for not responding earlier. I don't own any iOS devices, so I'm not able to test nor find a fix for this issue. Did you ever resolve it? If so, please share it here. Thanks!

taagidff commented 5 years ago

This problem is still not resolved. We will contact the mobile application development framework provider. Thank you for your reply.

gregbendes commented 5 years ago

Did you have any resolution for this? I assume based on my research that it's just not going to happen, because it's an OS-specific feature.

gregbendes commented 5 years ago

Hey guys,

Just wanted to let you know about a solution we've found after an excrutiatingly long search:

Based on this comment by @Mottie : https://github.com/Mottie/Keyboard/issues/644#issuecomment-360540014

We've wrapped all input fields in spans, attached the keyboard to the input fields, set them to clickthrough with the pointer-events: none css rule, and then on the configuration side, we've set noFocus: true, and openOn: '' (empty) and finally, we've added a click event handler to all wrapper spans that would open the underlying keyboard, like this: $().find('.ui-keyboard-input').getkeyboard().reveal();

And that's it. Since you don't click on the input itself but the span "behind" it, it will never get focus so the form assistant won't appear either.

We're still testing this out but I believe this is a viable workaround.