Advanced Input Field

I created a InputField with TextMeshPro Text. I have placed this field on a simple dialog in my app. Scrolling within the input field is sufficient and works well with Scroll Area script. When on mobile as we are using landscape mode so the keyboard covers the lower par of the dialog.

Is there a script that can help me move my dialog when the keyboard is shown and then move it back when the keyboard is hidden?

Glenn

 

Currently not yet for Android.
I could find that I would need the "SMS User Consent API" to autoparse one time codes from sms. I'll try to get this working somewhere this week.

 

Landscape mode should work fine

 

Not sure why the text is invisible on your iOS device. I did a quick run on my iPhone XS and there the text seems to be visible.
Native controls would be difficult to implement. Especially when scrolling, Internally the plugin uses a native inputfield (offscreen) that handles the keyboard events.

 

Yes, see the Form scene in the Samples directory for an example and the KeyboardScroller component used in that scene (attached to ScrollRect gameObject).

This registers an event listener to get an event callback whenever the keyboard height changes:
NativeKeyboardManager.AddKeyboardHeightChangedListener()

 

I am using a iPad pro 3rd gen - lOS 13.3.1 - just a thought are are you using dark mode?

The buttons work but i cannot read the text.

 

Hmm, no just using the default settings. Also, tested it on my iPad Air.
Does it also happen in the scene "Form" in the Samples directory of the plugin? (see username and comments field in that scene)
Normally the plugin should also display the controls when running it in the Unity Editor when build target is Android or iOS. Is the text also invisible there?
One other thing that could have an effect on text is the scale mode of the Canvas. If this is the case you might need to increase/decrease the font size of the labels of the ActionBar.
The ActionBar prefab used can be found by using the the topbar option: AdvancedInputField => Global Settings => IOS ActionBar prefab property.

 

Hi yes it is blank in the editor as well.



also when no text is selected we only see one selection carret



Just to confirm you are using 2019.3.1f1?

 

Yes, using 2019.3.1.

This is the sample scene "Form" in Assets/Plugins/AdvancedInputField/Samples/Scenes. (comments field)
Is the text invisible in that scene too? This is the scene I normally use for testing.

If it is visible in the "Form" scene, but not in your scene, I think it's because of the Canvas scale settings. Could you post a screenshot of the Canvas settings you are using for the Canvas that renders that your inputfield?

You could also modify the ActionBar Text components in runtime in the Unity Editor to check what the issue is that they don't render properly. Should be the last child of your Canvas when ActionBar is visible onscreen.


The margin (anchor offset from the sides) and/or the font size might need to be adjusted to work with your Canvas settings.
As mentioned before, you can find the ActionBar prefab used by opening the Global Settings from the AdvancedInputField dropdown in the topbar.

Also, for the caret. Trying increasing the caret width in the inspector of the AdvancedInputField instance.

 

I got it working on Android too now. Does require a bit more to setup.
Following Dropbox link contains an Android build (apk file) that demonstrates one time code autofill on Android and also included a patch package to add this functionality to latest version of the plugin (1.9.6):
https://www.dropbox.com/sh/sghdxgsugpumoyw/AAB9yaeYJ9U1k-X4-YLmQVPNa?dl=0

To use this in the plugin:
1. Install latest version of the plugin from the AssetStore (1.9.6).
2. Install patch package from the above Dropbox link.
3. Install the Unity Jar Resolver Package: https://github.com/googlesamples/unity-jar-resolver
(Direct link to unity package:
https://github.com/googlesamples/un...play-services-resolver-1.2.135.0.unitypackage)

To test:
1. Add the new sample scene "OneTimeCode" in Samples/Scenes to your build settings
2. Build and run on a Android device
3. Press the request button
4. You now have 5 minutes to send the sms message containing to code (for example: "code 123456") to this Android device.
5. Once received it will ask for permission to parse the message and afterwards it will autofill it.

 

Thank you. Will purchase and check.

 

Hello @jpienbro ...

My team is considering using your plugin in our Unity game, as it looks like it contains the major functionality that we need for our input fields. Our lead engineer wanted to know whether the full source code is made available when purchasing and using the plugin package? ...in case there are bugs, or issues / missing features that we encounter that we'd want to patch ourselves.

Thank you

 

Hi my issue seems to revolve around the font size of the text input field. At 56 all seems well. When I start to make the font smaller things start going off the rails. I have screen space overlay set, pixel perfect and canvas scaler set to constant physical size (points - 96,96,96)

 

Check your inbox

 

By default the Unity package includes the C# scripts used within Unity. The native (platform specific) code are precompiled as native libraries (iOS, Android, UWP), but if you need the source code for one those native libraries just send me a personal message on this forum.

 

Does copy&paste (more importantly) works on mobile platforms (iOS, Android)? It works only on windows for us.

 

On Mobile copy & paste in controlled by the ActionBar. Which is not enabled by default.
In the inspector of an AdvancedInputField instance (bottom options) you can enable the ActionBar and specify which actions it should allow. (Copy, Paste, Cut, Select All).
(As a reference: See the username inputfield in the scene "Form" in the Samples directory)

 

Sorry for stupid question, but where do I find the asset's documentation. Found the readme.pdf, but not fuller documentation. Thanks.

 

The ReadMe is the documentation file. Although I agree that I might need to update the documentation to include FAQs and explanations of the newer features/properties this inputfield provides.
The scenes in the Samples directory should show you the most common inputfield use-cases.

Is there something specific you need more information on?

 

Thanks for clarifying. All is good, just working through the samples and retro fitting into some existing mobile forms as I go. Probably like documentation more than most - can make me think of things not considered if just tackle the problem at hand.

Solution looks great for my needs. Thanks.

 

Not a support request, but wondering if you have ever considered enhancing the Unity dropdown control with your keyboard entry for an auto-complete function. I.E. start typing and it filters the dropdown to matching values. Just guessing many of us that purchase this plugin are probably looking to implement more complex mobile forms - and this would be a bonus. Otherwise thank you, this plugin has significantly improved the ux of my app.

 

There is a Dropdown example (that displays suggestions) while typing in the "Form" sample scene. See the country field.
That field shows all countries (from a list) that contain the current inputfield text/string value in their name. (Also see the OnCountryInputChanged & OnCountryDropdownChanged callbacks in FormControl.cs)

 

Ah... Sorry missed the response. I will look. Thank you!

 

Hello. Tried. Yeah, this work as expected. Thank you very much. One thing I have not resolved yet is why the keyboard doesn't appear on my android device? I tried to show using NativeKeyboardManager, but I think I do something wrong. Can anybody help me?
Unity 2018.4.6f1

 

Hello, since the last update, we are facing more exceptions of this kind

Code (CSharp):

1. Exception - ArgumentOutOfRangeException: Index and count must refer to a location within the string. Parameter name: count
2. System.String.Remove (System.Int32 startIndex, System.Int32 count) (at <567df3e0919241ba98db88bec4c6696f>:0)
3. AdvancedInputFieldPlugin.TextManipulator.DeletePreviousChar () (at <7366200b4c06492c8cd443bdfe04202d>:0)
4. AdvancedInputFieldPlugin.StandaloneTextInputHandler.ProcessKeyboardEvent (UnityEngine.Event keyboardEvent) (at <7366200b4c06492c8cd443bdfe04202d>:0)
5. AdvancedInputFieldPlugin.StandaloneTextInputHandler.Process () (at <7366200b4c06492c8cd443bdfe04202d>:0)
6. AdvancedInputFieldPlugin.AdvancedInputField.OnUpdateSelected (UnityEngine.EventSystems.BaseEventData eventData) (at <7366200b4c06492c8cd443bdfe04202d>:0)
7. UnityEngine.EventSystems.ExecuteEvents.Execute (UnityEngine.EventSystems.IUpdateSelectedHandler handler, UnityEngine.EventSystems.BaseEventData eventData) (at <9a528e1434ea459fb04a44aadd6a62ff>:0)
8. UnityEngine.EventSystems.ExecuteEvents.Execute[T] (UnityEngine.GameObject target, UnityEngine.EventSystems.BaseEventData eventData, UnityEngine.EventSystems.ExecuteEvents+EventFunction`1[T1] functor) (at <9a528e1434ea459fb04a44aadd6a62ff>:0)
9. UnityEngine.EventSystems.EventSystem:Update()

and

Code (CSharp):

1. ArgumentOutOfRangeException: Index and count must refer to a location within the string.
2. Parameter name: count
3. System.String.Remove (System.Int32 startIndex, System.Int32 count) (at <567df3e0919241ba98db88bec4c6696f>:0)
4. AdvancedInputFieldPlugin.TextManipulator.DeleteSelection () (at <7366200b4c06492c8cd443bdfe04202d>:0)
5. AdvancedInputFieldPlugin.TextManipulator.Insert (System.String input) (at <7366200b4c06492c8cd443bdfe04202d>:0)
6. AdvancedInputFieldPlugin.TextManipulator.TryInsertChar (System.Char c) (at <7366200b4c06492c8cd443bdfe04202d>:0)
7. AdvancedInputFieldPlugin.StandaloneTextInputHandler.ProcessKeyboardEvent (UnityEngine.Event keyboardEvent) (at <7366200b4c06492c8cd443bdfe04202d>:0)
8. AdvancedInputFieldPlugin.StandaloneTextInputHandler.Process () (at <7366200b4c06492c8cd443bdfe04202d>:0)
9. AdvancedInputFieldPlugin.AdvancedInputField.OnUpdateSelected (UnityEngine.EventSystems.BaseEventData eventData) (at <7366200b4c06492c8cd443bdfe04202d>:0)
10. UnityEngine.EventSystems.ExecuteEvents.Execute (UnityEngine.EventSystems.IUpdateSelectedHandler handler, UnityEngine.EventSystems.BaseEventData eventData) (at <9a528e1434ea459fb04a44aadd6a62ff>:0)
11. UnityEngine.EventSystems.ExecuteEvents.Execute[T] (UnityEngine.GameObject target, UnityEngine.EventSystems.BaseEventData eventData, UnityEngine.EventSystems.ExecuteEvents+EventFunction`1[T1] functor) (at <9a528e1434ea459fb04a44aadd6a62ff>:0)
12. UnityEngine.EventSystems.EventSystem:Update()
13.  

I do not know, what the users are doing, but we use this component for in game chat, so they should not be doing too much.
Unity 2019.2.21f1
plugin version 1.9.6

 

Normally this happens automatically when focusing an inputfield.
Do you also have this issue on other Android devices or only a specific one?
Do you also have this issue in a clean Unity project with this plugin installed? (You could also test it with one of the Android sample scenes linked in the first post of this thread).
Sometimes other plugins could cause conflicts.

 

I do not know, what the users are doing, but we use this component for in game chat, so they should not be doing too much.
Unity 2019.2.21f1
plugin version 1.9.6[/QUOTE]

Hmm, based on those errors it seems like the caret position and/or selection positions are not valid positions in current text for some reason.
It would help if I know how to trigger it, but I guess you don't know that yet yourself too.
What was the previous version of the plugin you had installed that didn't have this issue? Maybe I can pinpoint the issue better that way.

 

I have the ability to test only on Samsung S10 (G9730)
Checked on the empty project following the instruction and the keyboard appears in the build.
Going to check what wrong with my project. Thank you.

 

It was automatically generated error from user's device, so i do not know, whether it was caused by something in the 1.9.6 version. I have no idea, what user did before

 

@jpienbro Additionally, i have found a new automatically generated issue (Windows 10)

Code (CSharp):

1. System.String.Remove (System.Int32 startIndex, System.Int32 count) (at <567df3e0919241ba98db88bec4c6696f>:0)
2. AdvancedInputFieldPlugin.TextManipulator.DeletePreviousChar () (at <7366200b4c06492c8cd443bdfe04202d>:0)
3. AdvancedInputFieldPlugin.StandaloneTextInputHandler.ProcessKeyboardEvent (UnityEngine.Event keyboardEvent) (at <7366200b4c06492c8cd443bdfe04202d>:0)
4. AdvancedInputFieldPlugin.StandaloneTextInputHandler.Process () (at <7366200b4c06492c8cd443bdfe04202d>:0)
5. AdvancedInputFieldPlugin.AdvancedInputField.OnUpdateSelected (UnityEngine.EventSystems.BaseEventData eventData) (at <7366200b4c06492c8cd443bdfe04202d>:0)
6. UnityEngine.EventSystems.ExecuteEvents.Execute (UnityEngine.EventSystems.IUpdateSelectedHandler handler, UnityEngine.EventSystems.BaseEventData eventData) (at <9a528e1434ea459fb04a44aadd6a62ff>:0)
7. UnityEngine.EventSystems.ExecuteEvents.Execute[T] (UnityEngine.GameObject target, UnityEngine.EventSystems.BaseEventData eventData, UnityEngine.EventSystems.ExecuteEvents+EventFunction`1[T1] functor) (at <9a528e1434ea459fb04a44aadd6a62ff>:0)
8. UnityEngine.EventSystems.EventSystem:Update()

both reported issues are happening quite offten (like every day there is someone who triggers them).

 

Hello, I have problem with caret positioning in your asset. Basically, the "rect" where the user is able to put caret is off to the side compared to other elements which can result in such results as on screen



This happened also to selectioning box, but i managed to fix it by setting x pivot to 1. Can't fix caret problem tho

 

Does this also happen in the Sample Scenes for you?


Also, (not sure if it's the same issue) above screenshot was the problem that generated an offset for another user:
If you modify the margins of the child objects with Text renderers (Text, Processed & Placeholder) it will generate an offset. They need to be zero for all sides.
If you need some spacing, you can better modify the margins of the TextArea child object. (Because the size of the Content child object gets recalculated on runtime to fit all the text)

 

Hello.

Is there a way to use the keyboard scroller script whilst have the advanced input field in a parent that contains a vertical layout group, layout element and content size fitter? Seems to move the view to the top of the scroll view as soon as the keyboard expands - I've not found a way to prevent this.

Many Thanks,

Bob.

 

The way the KeyboardScroller currently works it that it expands the scrollrect content transform height (when keyboard appears) so it can scroll either direction (even if the inputfield at top or bottom of the scrollrect content transform).
For this to works correctly the content transform and the CenterGroup transform (as mentioned in the ReadMe of the plugin) need to be same height. Also see sample scenes.
That VerticalLayoutGroup or other autoresize component might change the CenterGroup transform on runtime. So when this happens you might need to update the height of ScrollRect content transform so they match again. Also after you update the height, you'll need to call the RefreshOriginalContentSize() on the KeyboardScroller component. This is to make sure the scrollrect content transform height will return to normal after hiding the keyboard.

That's the way it's currently implemented. I might need to research if the same effect can be achieved using less configuration.

 

Thanks for coming back. I had seen the comments in the readme and looked at the demo scenes, but as you mention, the VerticalLayoutGroup/ContentSizeFitter will change the height of "centre group" as required. I'll follow the advice and look for a way of pragmatically updating the content transform to match. Thanks for the support.

 

Hello.

Unity 2019.3.0f5
plugin version 1.9.7

How should I deactivate Input field?
I used "SetActive(false)" to hide Input field, but in ios, only blue caret was remain.

To fix this, I modified the function of "HideCursors" in MobileCursorsControl.cs.
```
--- a/Assets/Plugins/Advanced Input Field/Scripts/InputField/MobileCursorsControl.cs
+++ b/Assets/Plugins/Advanced Input Field/Scripts/InputField/MobileCursorsControl.cs
@@ -189,6 +189,9 @@ namespace AdvancedInputFieldPlugin
CurrentCursor.enabled = false;
StartCursor.enabled = false;
EndCursor.enabled = false;
+ HideCurrentCursorFront();
+ HideStartCursorFront();
+ HideEndCursorFront();
```

This worked, but if there is a better way, please let me know.
Thanks for your support.

 

Hi, today while I was testing stuff, I noticed that notifications somehow affects keyboard height (?).
I have similar panel to your emoji's keyboard in sample scene with chat, and it is placed above keyboard, but when I recieved a notification from messenger the panel moved down slightly. Any tips to prevent this? Device I'm using is Xiaomi mi9t pro, android 10.

 

Normally you can use the .ManualDeselect() method to lose focus and hide the keyboard.

I could reproduce the problem with cursors staying visible and the issue that when deactivating the inputfield gameobject it wasn't properly deselecting the inputfield itself.

I've added the following changes to fix the issues:
In AdvancedInputField.cs change OnDisable() to this:

Code (CSharp):

1. protected override void OnDisable()
2. {
3.    base.OnDisable();
4.    TextAreaTransform.GetComponent<ScrollArea>().OnValueChanged.AddListener(OnTextScrollChanged);
5.  
6.    if(Selected)
7.    {
8.       EndEditMode();
9.       DisableSelection();
10.    }
11. }

In MobileCursors.cs change ShowFront():

Code (CSharp):

1. public void ShowFront()
2. {
3.     if(!enabled || !gameObject.activeInHierarchy) { return; }
4.     FrontRenderer.Show();
5. }

 

I could reproduce it on a Xiaomi device (different model though). It seems to take the notification rect into account when it's visible. After the notification disappears the keyboard height is correct again.
Unfortunately this problem originates in a missing feature of the Android API. There is no (direct) API to get the amount of space the keyboard occupies. So most solutions involve calculating this value by measuring the difference between the visible display rect and the total rect.
So it seems like the visible display rect also takes the notification pop-up into account.

What you could try it to ignore the keyboard height increase if the keyboard has been visible for a while, but other than that I wouldn't know.

 

Thanks for the response, that in fact should do the job.

Another thing is that it seems like there are other keyboardheight values on different devices. While I positioned everything to fit my device (xiaomi mi9t pro) - panel appears just on top of the keyboard, my coworker tested it xiaomi mi a1 and panel appears under the keyboard. Could it be similar reasons? We both used gboard keyboard - but switching keyboard to swiftkey gave same results.

Edit: Noticed that we have two different resolutions - mine is 1080x2360 and his is standard 1080x1920 - I'm scalig my canvas depending on the width of the screen - maybe that is a problem?

 

Maybe you didn't divide the keyboard height that you get from the event by the Canvas.scaleFactor. Since the value you get from the event is in pixels you need to adjust it with scale factor of the Canvas. (For example: keyboardHeight /= Canvas.scaleFactor; )

 

This worked as expected. Thank you very much!
I hope this fix will be included in the next update.

 

Any idea how to autoselect/autofocus a field?!

 

Hello.
I'm finding that with a bluetooth keyboard and iPad Pro, iOS 13.4.1 that there is a lag when first setting focus on an inout field and any typed characters appearing. About 2 to 3 seconds. The keys are cached and shown only after another key is pressed after the 2 or 3 seconds has passed.

Not a major issue, but wondering if it is known issue?

Bob.

 

Thank you, got it working thanks to your example scenes Yeah I forgot about taking scaleFactor into calculations, and your method to get absolute Y was very helpful. Thanks a lot

 

There isn't a way to autofocus the inputfield like native apps do it (when screen is shown), but you can call .ManualSelect() on a AdvancedInputfield instance to focus it from code. So you could just call that method after you have switched to the next screen (which has that inputfield).

 

It's a known issue. I think the OS takes some time the first time to notice that a bluetooth keyboard is connected and that it should handle input differently.

 

Hello, yet another question
I'm almost done but need one more thing. Is there any way to check whether Keyboard scroller has done its job? I have 2 scripts listening for onKeyboardHeightChange, one of them is KeyboardScroller, second one is my script attached to input field, listener is added onSelect. But first listener that gets invoked is my script on input field even tho it was added to delegate later. I have to position panel in this script similiar way to you Mode sample scene, but I have to make sure KeyboardScroller has finished its Scroll method.

 

You could monitor the ScrollRect.vertical property in a Coroutine or Update method. The KeyboardScroller sets this property to false when it's scrolling and sets it back to true when it's done.
You could also maybe just start a coroutine when OnKeyboardHeightChanged gets called and wait a bit longer than the transitionTime of the KeyboardScroller.
Maybe I could also add an event for the KeyboardScroller in a future version of the plugin. I'll write it on my TODO list for now.

 

Can this package be used for a chat (like whatsapp) Having a native input field instead of unity input field?

When you open the native keyboard have at the top of the keyboard the input field where you can copy/paste move caret and send that text to the input field inside Unity