cordova-plugin-keyboard icon indicating copy to clipboard operation
cordova-plugin-keyboard copied to clipboard

dark keyboard

Open markshust opened this issue 8 years ago • 27 comments

Any chance we can add dark keyboard functionality to this plugin? This was in the original ionic plugin, but it's been commented out/not working for some time. https://github.com/driftyco/ionic-plugin-keyboard/blob/47518309fb18fd388527df495ddf9aea35a9fd77/src/ios/UIWebViewExtension.m#L65

This way we can have choice of keyboard color.

2fxcu

8ot3h

markshust avatar Mar 15 '16 17:03 markshust

I'm not opposed to including this, but I wonder why ionic removed it. Was it buggy or difficult to maintain? It would also be nice if there was support for android as well.

cjpearson avatar Mar 20 '16 22:03 cjpearson

Afaik the implementation changed in iOS 8, and it was just never updated :(

markshust avatar Mar 20 '16 23:03 markshust

I did a bit of research into this. It looks like keyboardAppearance is not supported with UIWebView. Ionic's solution and this one both involve swizzling methods of the webview's internal classes with limited success.

I'm a bit hesitant to mess around too much with private API's given reports of Apple rejecting apps (#21), but if someone finds a reliable solution to this, I'd be happy to bring in a PR.

cjpearson avatar Mar 23 '16 00:03 cjpearson

I would avoid private API's. Apple has indeed started rejecting these http://blog.ionic.io/pluginz-be-buggin/

I'm not a native iOS developer at all; I can barely read Objective-C code. However, I submitted a fix for this accessary bar bug that doesn't use private API https://github.com/markoshust/ionic-plugin-keyboard/commit/9b0ff0c0f5cfc5672941ffaa9664b35bb2920bee

This seems to be the appropriate fix for iOS 9 and dark keyboards, however it uses private API's http://stackoverflow.com/a/33702029/832719

Is there any way the same method of my accessory bar fix can be utilized/modifying in a similar fashion for this dark keyboard? It's just a few lines, I find it a bit hard to believe that we can't have dark keyboards in cordova apps -- I was under the impression anything native can be adapted to cordova. Is this not the case?

Please excuse my complete ignorance. Web dev here ;)

markshust avatar Mar 23 '16 11:03 markshust

It's not the method that's private, but UIWebBrowserView is an undocumented class that Apple uses within the UIWebView. It appears that Apple was running the strings tool on the binary and flagging any binary that contains the string "UIWebBrowserView". Try running strings HelloCordova.app/HelloCordova | grep UIWebBrowserView on your app to see this. Creating the string at runtime gets around this check, but there may be other tests Apple runs.

The dark keyboard isn't a limitation of Cordova, but rather UIWebView. Keyboard appearance is defined for each control. Some controls, like UITextField allow you to set it, but UIWebView does not.

cjpearson avatar Mar 23 '16 22:03 cjpearson

I was able to get this to work based off of the iOS 9 solution. It's necessary to swizzle keyboardAppearance on both UIWebBrowserView and UITextInputTraits. You can try it by adding this code at the end of pluginInitialize.

IMP darkImp = imp_implementationWithBlock(^(id _s) {
    return UIKeyboardAppearanceDark;
});

for (NSString* classString in @[@"UIWebBrowserView", @"UITextInputTraits"]) {
    Class c = NSClassFromString(classString);
    Method m = class_getInstanceMethod(c, @selector(keyboardAppearance));

    if (m != NULL) {
        method_setImplementation(m, darkImp);
    } else {
        class_addMethod(c, @selector(keyboardAppearance), darkImp, "l@:");
    }
}

cjpearson avatar Mar 23 '16 23:03 cjpearson

I've added support in a test branch. It seems to work for me on an iOS 8 device and iOS 9 sim.

Keyboard.keyboardStyle("light")
Keyboard.keyboardStyle("dark")

or

<preference name="KeyboardStyle" value="light" />
<preference name="KeyboardStyle" value="dark" />

cjpearson avatar Mar 24 '16 00:03 cjpearson

Awesome!! Thanks so much for popping it out so fast. I'll be testing it out later today.

markshust avatar Mar 24 '16 13:03 markshust

Sorry got behind on the holiday. Will test this out later today.

markshust avatar Mar 29 '16 11:03 markshust

@cjpearson this isn't working for me, on device or sim (9.3).

I tried calling keyboardStyle with both methods.

markshust avatar Mar 29 '16 12:03 markshust

Sorry for the late reply. I'll update Xcode and see if I can reproduce this. Can you get it to work on older simulator versions?

cjpearson avatar Apr 06 '16 22:04 cjpearson

Sorry, no go. I'm only working with iOS 9+ right now.

markshust avatar Apr 13 '16 21:04 markshust

I'm still unable to reproduce this. Could you give more details? Here are the steps I followed:

cordova create HelloWorld cd HelloWorld cordova platform add ios cordova plugin add https://github.com/cjpearson/cordova-plugin-keyboard#dark

Add <preference name="KeyboardStyle" value="dark" /> to config.xml

cordova prepare ios

I then run it in XCode and it works fine on iPad and iPhone Sims on iOS 9.3

cjpearson avatar Apr 21 '16 23:04 cjpearson

Hmmm. Your example is indeed working for me.

I wonder if this is an issue with Meteor somehow (what I'm using it in), or perhaps they are running a different version of Cordova. I believe this is ok for you to merge in, as even though it wasn't working in my Meteor + Cordova app, it didn't cause any ill-advised side effects.

markshust avatar Apr 23 '16 12:04 markshust

What about android ? How to force dark keyboard style

maytione avatar Apr 29 '16 15:04 maytione

I'm using your plugin in ionic 2 app and setting the preference like <preference name="KeyboardStyle" value="dark" /> doesn't seem to work. Also, neither does Keyboard.keyboardStyle("dark"). Building for 9.3

jmordica avatar Nov 20 '16 06:11 jmordica

The dark feature still only exists in an experimental branch. Are you using that branch?

cjpearson avatar Nov 21 '16 12:11 cjpearson

Yes using the dark branch.

jmordica avatar Nov 21 '16 14:11 jmordica

How do i use the dark branch? Do i have to put <plugin spec="https://github.com/cjpearson/cordova-plugin-keyboard/tree/dark" source="git" /> in config.xml ?

Risingson avatar Dec 08 '16 00:12 Risingson

<plugin spec="https://github.com/cjpearson/cordova-plugin-keyboard.git#dark" /> should work

cjpearson avatar Dec 08 '16 12:12 cjpearson

@cjpearson what is the status of this. I would love to see dark keyboard support in this plugin

maikelsgit avatar Apr 05 '17 19:04 maikelsgit

It should work if you install the dark branch. I haven't pulled it into the main branch yet. It does some things that Apple may not approve of, so it would have to be behind some sort of opt-in compiler flag at least. I was also considering support for other text input traits if there was the need.

cjpearson avatar Apr 11 '17 23:04 cjpearson

I'd love to see a package that extends this class with the fix for those who want to use it. Something like this package: https://github.com/onderceylan/cordova-plugin-wkwebview-inputfocusfix Not sure how to do it myself though :/

ccorcos avatar Jul 24 '18 01:07 ccorcos

Hey guys, any updates on this, we have a hybrid app wrapped in cordova and we have a dark mode where we want to display a dark themed keyboard. what is the best way to do this at the moment ?

miguelyoobic95 avatar Nov 22 '18 15:11 miguelyoobic95

@miguelyoobic95 i haven't seen any push on this, i believe cordova is sort of in maintenance mode at the moment. i'd recommend checking out https://capacitor.ionicframework.com/docs/apis/keyboard and possibly filing a ticket with them - it's like cordova, but all the code has been updated with swift and it is being actively developed.

markshust avatar Nov 22 '18 16:11 markshust

Hey guys (@ccorcos), I've made a package with this marvellous lines of code: http://github.com/gabrielribeiro/cordova-plugin-keyboard-appearance Thanks @cjpearson! (Please advice me if I did something wrong)

gabrielribeiro avatar Mar 27 '19 12:03 gabrielribeiro

@gabrielribeiro thanks for your work !

Aarbel avatar Mar 27 '19 13:03 Aarbel