search

tjvantoll / nativescript-IQKeyboardManager

NativeScript wrapper for the popular IQKeyboardManager iOS framework
MIT License
100 stars 20 forks source link

Hint in textView toolbar #57

Closed BigWillie closed 5 years ago

BigWillie commented 5 years ago

is it possible to show the 'hint' in a textView toolbar?

EddyVerbruggen commented 5 years ago

You mean like those 'Email address' and 'Password' fields in this animated gif? https://github.com/tjvantoll/nativescript-IQKeyboardManager#nativescript-iqkeyboardmanager-plugin .. I think that's the default behavior if a hint was added, no?

BigWillie commented 5 years ago

Wow! thanks for the quick reply :) Yes - exactly like those... it doesn't seem to work with TextView fields, but does work with TextField..

I would use TextField if it were multiline. Killer keyboard by the way - has solved so many problems for me :) thanks!

BigWillie commented 5 years ago

eg:

<TextView hint="Additional Information" v-model="additional_information" />

Does not show hint, but

<TextField hint="Additional Information" v-model="additional_information" />

does show the hint

EddyVerbruggen commented 5 years ago

Ah, hmm, good catch. Not sure I've ever tried that actually. But hang on, I have an idea.

BigWillie commented 5 years ago

Cool :) Thanks!

EddyVerbruggen commented 5 years ago

If you install version 1.5.0 now, you can use TextViewWithHint like this.

The reason you need a special TextView patched by the plugin is because the internal library (IQKeyboardManager) uses its own extension of iOS' UITextView called IQTextView which the plugin now also extends when TextViewWithHint is used. This adds support for a placeholder property which I've wired to NativeScript's hint property.

BigWillie commented 5 years ago

Amazing! thank you!!! đź‘Ť

BigWillie commented 5 years ago

@EddyVerbruggen sorry for the delay, only just got around to testing it as was having a mare of a time with webpack... in the end I just copied my files out into a new native script project...

I put the tag into my vue nativescript app - and any component which contains it fails to load. Unfortunately, the logs don't tell me why...

EddyVerbruggen commented 5 years ago

Did you register the tag? I didn’t have time to document that, but it’s extremely similar to https://github.com/EddyVerbruggen/nativescript-IQKeyboardManager#nativescript-w-vue-usage

BigWillie commented 5 years ago

Thanks. Yep - I added

Vue.registerElement("TextViewWithHint", () => require("nativescript-iqkeyboardmanager").TextViewWithHint)

(as an aside - there is a typo in the example provided - a space between the object's dot and method)

to my app.js (main.js) file, and it didn't work.

Edit

Problem was in how I was calling the tag:

This does NOT work <IQKeyboardManager:TextViewWithHint hint="Additional Information" v-model="additional_information" ref="additional_information" />

This works: <TextViewWithHint hint="Additional Information" v-model="additional_information" ref="additional_information" />

No need for the IQKeyboardManager: part of the tag in view land.

Thanks for this - this plugin is fantastic! :D Thank you for making it!

EddyVerbruggen commented 5 years ago

Ha, yeah, that IQKeyboardManager: prefix is only for plain-{N} apps, not for Angular and Vue. Glad you figured that out! Will change the readme a little. đź‘Ť