BETA test

[EddyVerbruggen]

trafficstars

Hi folks,

(Pinging @enricodeleo, @pbudner, @crissi, @AlexDisler, @jcesarmobile because you fine folks starred the repo previously)

If you are interested in BETA testing this plugin, please download it, unzip it and install it from a local folder: cordova plugin add ../../path-to-unzipped-plugin

Then take a look at demo/index.html to see what's possible.

This plugin will give you full access to the native keyboard properties like keyboard color, keyboard type, the accessory bar, etc. As a bonus I've added an iMessage/WhatsApp/Slack - style messenger component which you can play with.

This is all available for iOS, I may add the messenger component for Android later. Not sure yet. I'm also not sure yet if there will be a FREE/PRO version of this plugin, but during the BETA it's all available of course.

If you have any feedback about the features or find issues please just dump 'em in this issue as a comment.

Thanks in advance, Eddy

[pbudner]

First of all, thanks for your effort. You're doing great work! I really missed the dark keyboard appearance. I'll test it later in a more extensive way. But here are the first two issues I had:

Padding is apparently not considered The following screencast shows the input with top padding.

The following input is without top padding.

Caret is at a wrong position after entering several characters

[EddyVerbruggen]

@pbudner Awesome, that's very useful feedback!

I've fixed the top padding already, but I'm really curious about the specs of the font you're using. Can I get your app to debug it, or the details on the font used in the search box?

[enricodeleo]

thank you!

[pbudner]

@EddyVerbruggen Since the original project is very huge, I created a new one here. Its based on the IonicFramework. With the following CSS specs for the input field:

font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
font-size: 14px;
line-height: 18px;
font-weight: normal;
box-sizing: content-box;
-webkit-appearance: textfield;
padding-left: 4px;
height: 29px;
padding-top: 5px;

The input has the following size:

I also encountered another issue. The visible scroll view does not adapt:

[EddyVerbruggen]

@pbudner Thanks a lot for you testproject, it's very helpful! I was able to fix all the issues you reported, but since this required a partially new approach I need to test it a bit more. I'll post a new version later this week.

[EddyVerbruggen]

Hey guys,

I've finished refactoring and testing the new release, I think all @pbudner's reported issues are solved by this update - please start a fresh project and download version 0.2.0 of the plugin from here.

Thanks again for your efforts! Eddy

[pbudner]

@EddyVerbruggen I started a fresh project and added the 0.2.0 version of the plugin. The padding issue seems to be fixed. But the following strange things happen: See YouTube Video

1. EMOJI appears two times
2. You cannot scroll within the input box and if you do weird things happen

The www folder stayed the same.

[EddyVerbruggen]

The video is private, can you make it public (very curious!).

[pbudner]

Sorry, it should work now.

[EddyVerbruggen]

@pbudner Thanks! If you want you can disable the Emoji keyboard button by setting data-nativekeyboard='{"type":"ascii", ... The ascii (or asciicapable) type is a native iOS keyboard type that disallows Emoji entry.

That scrolling/selection issue though makes me consider yet another type of implementation. If you set a sane maxlength though you won't have this problem: <input maxlength="30" ...

[aussieboi]

Hi first off all, awesome tnx for plugin, and i can't get "accessorybar" to show, on default ionic/cordova keyboard plugin,I can but I need dark layout of the keyboard all the time and only your plugin provides that, so any tip how to have both dark layout and accessorybar aswell? tnx

[pbudner]

@EddyVerbruggen any progress here?

[EddyVerbruggen]

@pbudner I've been doing some work to pay the bills and will be during May. That combined with prepping a pgday presentation and workshop leaves me with little time to work on this unfortunately. I sure intend to get back to it though.

[msaelices]

What about to add the source code to this repo, to allow contributing to other people like me? It would be great

[Textras]

Wondering if there are updates since May? Or more specifically anything for Android messenger side? If so love to beta the Android.

[EddyVerbruggen]

@Textras Every day I try to find time to work on this but fail to do so. Still trying though.

[EddyVerbruggen]

Hi guys, thanks so much for the support and feedback!

I decided to no longer sit on this and release a 1.0.0 🎉

I've made a bit of a pivot though; this test was mainly focussed on testing regular text input, but I decided to release the messenger component first (see the screenshots in the updated readme). I was finally able to implement an Android version as well and I'm really happy with the result!

Let's keep this open for further discussion on the iOS-regular-textinput feature that's also supported in 1.0.0 but I won't make any noise about it until it's even more solid.

[danielcrk]

@EddyVerbruggen This is really interesting as keyboard input is always a nightmare in cordova apps. But just to get this straigt, can this plugin actually supress the native wkwebview keyboard and open a custom one on input focus on a regular html input-tag in a hybrid app?

Not to mention that you before this plugin couldn't open the keyboard in wkwebview programatically, unless from a click-event. Would this plugin then solve that issue?

I think there is huge potential here!

[EddyVerbruggen]

@danielcrk I'm not sure I've tried with wkwebview but I think wrt this plugin there's no difference.

I've "marketed" this plugin to be a messenger component (a chat keyboard with a textarea attached to the keyboard), but it started out as more of a plugin that does what you describe.. it's just not documented as there are a few edge cases like emoij input that mess things up on iOS (although it can be suppressed). I haven't looked at it for a while but feel free to install the plugin and play with examples like this one.