Advanced Input Field 2

In case you didn't find it already:
There are 2 sections in the documentation related to this:
- Frequently asked questions: "How to get the keyboard height on mobile platforms?"
- Using the KeyboardScroller component (if you want to use it in a ScrollRect)
Also see the scenes in the Samples folder, for example: "Form" and "TextMeshPro/Chat" as a reference.

 

Thanks for this great project. I have been able to get it working beautifully. With regular Unity input fields I couldn't even consistently get the onboard keyboard to display. With yours I had a great system set up in only 2 days. Really valuable. Unity should buy it off you or license it from you for standard package like I presume they did TextMeshPro.

I just have a few comments.

1) Scrollbar Glitch
There seems to be a small glitch with scrollbar visibility which is bothersome. In vertical resize fit mode, the vertical scrollbar appears when needed, but does not disappear again when it is no longer needed.

Steps to reproduce:

- Tools > Create TMP advanced input field
- Mode > Vertical resize fit text
- Min height 80, max height 320
- Line Type > Multiline_Newline
- Vertical Scrollbar visibility > Always_When_Needed or In_Edit_Mode_When_Needed

You should now have an Advanced Input Field that can vertically resize 80 to 320 vertically and adds a scrollbar when needed vertically.

It does this well. The problem is when you then delete the message back down. The input field shrinks as it should appropriately. However, the vertical scrollbar never disappears after it appears. It should of course disappear when it's no longer needed (input box contents deleted).

The scrollbar disappears correctly if it's in scroll mode (fixed height/width), but I need the vertical resize fit text mode so this is a problem.

Is there any solution to get the vertical scrollbar to disappear again in this circumstance? If there's any fix or manual code I can add or way to override it please let me know. Thanks.

2) Emoji Support
I have not tried testing the Emoji issue in too much detail, but I understand it is a problem in that the current strategy involves creating a massive sprite sheet which can cost 16+ MB in the project and needs to be rebuilt and updated any time emoji systems change.

I am curious if you've seen this project: https://github.com/iBicha/EmojiTexture

It looks like it hasn't been updated in a while. I'm not good enough at C# or Unity to fully understand the implementation or if it's a good idea. What do you think? In principle that would avoid the need for the sprite sheets.Have you experimented with that approach? Is it decent or is the giant sprite sheet still the only reasonable method?

3) Advice for repositioning box around keyboard
To anyone having difficulty moving the inputs around the keyboard (eg. look001), my advice is to create a separate object with the following script in the first scene that runs in your project (adapted the script from the documentation pdf):

Code (CSharp):

1.  
2. public class KeyboardListener : MonoBehaviour
3. {
4.     public static float keyboardHeight = 0;
5.     private void Awake() {
6.         NativeKeyboardManager.AddKeyboardHeightChangedListener(OnKeyboardHeightChanged);
7.         DontDestroyOnLoad(transform.gameObject); //needed or lose the keybaord manager.
8.     }
9.  
10.     public void OnKeyboardHeightChanged(int keyboardHeightIn) {
11.         //float canvasScaleFactor = gameObject.GetComponentInParent<Canvas>().scaleFactor;
12.         keyboardHeight = keyboardHeightIn; //keyboard
13.  
14.     }

Then you can access KeyboardListener.keyboardHeight from elsewhere in your project and use it to reposition the objects if this variable changes (ie. if keyboard opens or closes). I'm not sure if it's the intended way to do it. I don't really understand how Unity listeners or events work but it seems to get the job done.

Thanks again for the project.

 

1. Could reproduce and fix it.
In ScrollArea.cs change the scrollingNeeded properties to this:

Code (CSharp):

1. private bool hScrollingNeeded
2.         {
3.             get
4.             {
5.                 if(Application.isPlaying)
6.                 {
7.                     return (m_ContentBounds.size.x > m_ViewBounds.size.x + 0.01f) && enabled;
8.                 }
9.                 return true;
10.             }
11.         }
12.         private bool vScrollingNeeded
13.         {
14.             get
15.             {
16.                 if(Application.isPlaying)
17.                 {
18.                     return (m_ContentBounds.size.y > m_ViewBounds.size.y + 0.01f) && enabled;
19.                 }
20.                 return true;
21.             }
22.         }

and add:

Code (CSharp):

1. UpdateScrollbarVisibility();

as the last line in OnEnable() and OnDisable() methods

2. Have seen that project before, but also saw that it hasn't been updated in a while. But the basic idea would be to to download emojis when needed and regenerate the sprite asset that TextMeshPro uses. Don't know if TextMeshPro actually allows this on runtime. Also, don't know how reliable the emoji API of Github is and if it uses the same emoji format as Android & iOS. Anyways in the end it would still need to generate spritesheets on runtime (which could be slow), because TextMeshPro would expect that.
It might be possible, but would be a complex feature.

 

Looks like I found one more beha

Great. Thanks for the quick fix. It works now.

Yeah, so sounds like there is no good solution for the Emoji issue besides the existing method unless Unity at their core integrates some support for it, huh? Okay well I will try to build a sprite sheet and see how it goes. Thanks.

Also, FYI, I found another small "glitch" which I just spent the last 3 hours trying to track down. It's not really a "glitch" so much as a configuration issue but I'll explain.

1) Create a multiline input field same as with the above example and set the height to say 80
2) Then either make it verticle resize to fit or make it show the scrollbars if needed.
3) Then set the framerate of your scene down very low like Application.targetFrameRate = 1;
4) Then increase the placeholder text size to say 60 or 70.
5) Then let the scene reload, go to another scene, and reload the scene with the input field.

You will find the input field "glitches" for the first frame. It will either expand to too big an area on the first frame then contract back down to expected size on the second or if you have scrolling enabled with fixed size, the bars will show up for the first frame then disappear.

It took me a few hours but I figured out the solution was to set the "Content" Rect Transform to stretch in all directions. The issue was the default "Content" Rect Transform was too small, and although it resizes itself upon load of a scene, there is a one frame delay which can be visible in some uses even if briefly.

So if you're updating the package and there's no disadvantage, I would set the Rect Transform on the "Content" element to expand in all directions with "0" left/top/right/bottom as well.

Thanks again.

 

Hi, I'm trying to focus the input field with code so the keyboard will be opened (without clicking on the inputfield).
I use- InputField.ManualSelect() which works fine.
And I add a custom text InputField.Text ="My name is- " ,
the problem is that the caret doesn't go to the end of that sentence and starts at the beginning, but I want people to type their name and not remove my text
What I tried:
- I tried to change Caret On Begin edit to End _of_text didn't work
-InputField.CaretPosition =4; doesn't do anything
-UpdateCaretPosition(); doesn't do anything
-.SetCaretToTextEnd(); doesn't do anything

After ManualSelect() the caret goes to the start of the text, and when you type, it duplicates the first character of the text no matter what you typed, and then it continues to the end of the text, very strange behavior

ManualSelect() doesn't act like touching the input field, because when touching it moves the caret automatically to end and ManualSelect() doesn't do it

 

Couldn't really reproduce it using latest version of the plugin.
This is the test coroutine I used. (Tested in Editor and on a Android device)

Code (CSharp):

1.     private IEnumerator TestRoutine()
2.         {
3.             yield return new WaitForSeconds(3);
4.             Debug.Log("Starting test");
5.             firstNameInput.ManualSelect();
6.             firstNameInput.Text = "My name is- ";
7.             firstNameInput.SetCaretToTextEnd();
8.         }

Or when setting "CaretOnBeginEdit" to END_OF_TEXT in the inspector and then running this coroutine on runtime:

Code (CSharp):

1.     private IEnumerator TestRoutine()
2.         {
3.             yield return new WaitForSeconds(3);
4.             Debug.Log("Starting test");
5.             firstNameInput.Text = "My name is- ";
6.             firstNameInput.ManualSelect();
7.         }

 

I confirm that it works thanks (I had to upgrade from 2.1.1). I was afraid to update since I had some try-catch blocks that I added manually on your script due to some users' exceptions. But next time it happens I'll let you know so you can add it/fix it and we'll work on the same scripts. Thanks again!

 

Hey, I noticed that the autofill for passwords doesn't seem to work on advanced input fields.
It works occasionally when you try it the first time you start the app and select the password field first but then stops working. The password action appears, you can select you password, but the field doesn't get filled.

Reproducable in Auto-Fill Example Scene.

Edit:
Should have mentioned that this occurs on iOS, Android seems to work.

 

Hey, adding dynamic fonts in runtime using OS fonts does not work with the asset (both Editor and Android), but it works with TextMeshPro fine.

Here is some sample code to add Japanese font from Windows:

string[] fontPaths = Font.GetPathsToOSFonts();
for (int i = 0; i < fontPaths.Length; i++)
{
if (fontPaths.Contains("msgothic"))
{
Font osFont = new Font(fontPaths);
TMP_FontAsset fontAsset = TMP_FontAsset.CreateFontAsset(osFont);
TMP_Settings.fallbackFontAssets.Add(fontAsset);
}
}

Pasting Japanese text into the Inputfield will not do anything.

 

Hey @fennecx_support can you please give any Info on this? Is it a know issue? Is it worked on? It's been a week.

 

I've managed to reproduce it. Seems to happen more often on my iPhone running iOS 15. I've pinpointed the issue to a race condition when the native autofill gets executed and when the app receives focus again.
Anyways I implemented a workaround to process the autofill text change in this situation.
See attached patch package.

 

Hey, just reposting, in-case you missed my first reply.

 

I tried to reproduce it, but for me it's working in the Editor on a Android device.
I did need to make some changes to your code to get it working though:
(Added NotoSansCJK for Android, because msgothic is not available on Android)

Code (CSharp):

1.        
2. string[] fontPaths = Font.GetPathsToOSFonts();
3. for(int i = 0; i < fontPaths.Length; i++)
4. {
5.    Debug.Log("OS Font: " + fontPaths[i]);
6.    if(fontPaths[i].Contains("msgothic") || fontPaths[i].Contains("NotoSansCJK"))
7.    {
8.       Debug.Log("Adding os font");
9.       Font osFont = new Font(fontPaths[i]);
10.       TMP_FontAsset fontAsset = TMP_FontAsset.CreateFontAsset(osFont);
11.       TMP_Settings.fallbackFontAssets.Add(fontAsset);
12.       break;
13.    }
14. }

I've put above code in the Start() method.

Did get some random TextMeshPro shader error on runtime, but could fix it quickly by reimporting TextMeshPro Essential Resources (TopBar: Window => TextMeshPro => Import TMP Essential Resources)

 

I updated to the latest version, used your code, and also reimported the TextMeshPro Essential Resources. It still does not work in my case.
The text shows up if I paste it in the text editor field (under general), but if I use the action bar to paste the text, it does not work.

 

I've send you a PM

 

Thanks for the fix @fennecx_support, it works now on iOS!
However I now get the rare bug where sometimes the keyboard won't disappear after auto fill and will stick throughout my app. I implemented a hardcoded hide for the native keyboard after the input fields are parsed for now. Not sure if this fixes the issue, as it only happens rarely on my device. So just a heads up for something to have an eye on.

 

Hello, Currently you can double click directly on a word to select it and you can double click anywhere on the line and the closet word is highlighted. Could we have an option so that double clicking highlights all the words in the input field? A triple click would work as well if double clicking was still to select the closest word.

 

Yes, I could add a property to determine which action to do when triple tapping, but selecting each word individually would be more difficult because text selection is one sequence: from SelectionStartPosition to SelectionEndPosition. Only a visual effect might be possible, maybe something similar to the underlining of word(s) in the SpellChecker sample scene.
Do you only need a visual effect (for example underlining) or do they all need to internally be selected (so you can clear them all at once)?

 

Hi, we found a bug with the action bar. If, after entering any character or word, you cannot paste anything additionally, since the action bar does not appear. For example, you cannot write text and then insert a link. Is there any way to fix this?

 

Hi the requirement is to select them all for deletion. The current behaviour as I tested it in the desktop version of our app is

Double click on a word and that word is highlighted.
Double click on a space to the right of a word and the word to the left is highlighted
Triple click on a space not adjacent to a word and the word to the left is highlighted

We would like to to have triple click any where highlight all words.

Thanks!

 

This is intended behaviour. The blue cursor will disappear when typing/pasting text, but will reappear again when tapping somewhere else in the text. By tapping the blue cursor you should be able to show the action bar again. Other Android apps also use this behaviour.

 

As mentioned before the native inputfields (that the plugin internally uses) don't allow selecting multiple different text regions at one time, so a visual trick would be needed to get this working. I'll see if I can implement this with some extra components attached to the inputfield.

 

Just to be clear when I said highlight, I meant selected. Thanks for looking into this.

Glenn

 

Version 2.1.4 is pending release on the AssetStore:
• Bugfix: Fixed email validator not allowing non-unicode letters
• Bugfix: Fixed issues when duplicating inputfield on runtime while inputfield itself is in edit mode
• Bugfix: Fixed issue that scrollbars stayed visible when using the inputfield resize modes and the content can completely fit within bounds again
• Bugfix Mobile : Fixed notch area not taken into account when determining position of ActionBar
• Bugfix iOS: Fixed password autofill sometimes not updating inputfield value
• Feature: Added OnTextTap event to detect rapid taps on the text. For example to do an action when detecting single tap, double tap, triple tap,…

 

I've implemented the behaviour using a bit of a workaround since the native inputfields doesn't support multiple selection regions. Rather I've added 2 extra components to handle the "fake" multiselection:
- MultiTextSelectionRenderer: A modified version of the TextSelectionRenderer that can highlight multiple text regions
- MultiTextSelectionHandler: Script to handle the triple tap detection and highlight all words when detected. Also detects the backspace key press to delete those words.
Also a new event named "OnTextTap" has been added to handle single tap, double tap, triple tap,...

An example of this behaviour can be found in the new Sample scene "TapAction" which is included in version 2.1.4. This version is currently pending in the AssetStore, but usually it becomes available on the AssetStore within a day.

 

Hi, does the Advanced Input Field 2 provide native ActionBar with copy, select and etc, unlike the first version of an asset (see the attached image)?

 

Hey, is there a method I can call to force the keyboard to close/hide?
I noticed that if I restart the scene while the keyboard is showing, it will stay shown.

 

Yes, I have the asset and there is an ActionBar. It is not native though, it's a Unity UI Object; however, it will work the same way.

 

Unity might not call Deselect when switching to another scene. You could call .ManualDeselect() on the active inputfield before switching or call the keyboard hide directly using NativeKeyboardManager.HideKeyboard()

 

HideKeyboard() works, but looks like the code still tries to Deselect which gives an exception since the object no longer exists.


Is there a way to get the active Inputfield to call ManualDeselect()?

Either way, adding Try/Catch there should fix the problem.

 

Hi I just upgraded from 2.0.5 to 2.1.4. Our input fields now have mobile selection cursors. Build platform is PC, global setting is disabled


and I also went as far as disabling it on the actual field.






Thoughts about what may be mis-configured?

EDIT: I found this line of code in TextNavigator.cs

if(InputField.CanUseTouchSelectionCursors || InputField.CanUseActionBar)

but it has not changed from 2.0.4 to 2.1.4

We would like to use the action bar for my spellchecker but do not want mobile section cursors when I am on the PC platform.

EDIT 2: I think I need to make better notes. It would appear I modified that line to be

if(InputField.CanUseTouchSelectionCursors && InputField.CanUseActionBar)

Thanks

 

Hi @fennecx_support, thanks for implementing the tap action code. I was hoping this would also work with mouse clicks on desktop as well as taps on mobile?

Thanks

 

The active inputfield doesn't get tracked atm, but could make it hide the keyboard automatically when it gets disabled/destroyed with a small change.
Change the OnDisable() method in InputFieldEngine.cs to this:

Code (CSharp):

1. internal void OnDisable()
2. {
3.        ScrollArea scrollArea = InputField.ScrollArea;
4.        scrollArea.OnValueChanged.RemoveListener(OnTextScrollChanged);
5.  
6.        if(!NativeKeyboardManager.InstanceValid) { return; }
7.        if(Selected)
8.        {
9.               Deselect(EndEditReason.PROGRAMMATIC_DESELECT);
10.               EndEditMode();
11.               DisableSelection();
12.        }
13. }

 

Forgot the taps were getting handled by a different method for Standalone platform.
To make left mouse clicks also invoke the event change OnStandaloneTap() in TextInputHandler.cs to this:

Code (CSharp):

1. private bool StandaloneTap(Vector2 position)
2. {
3.        if(actionBar != null)
4.        {
5.               if(Input.GetMouseButtonUp(0)) //Left mouse button was clicked
6.               {
7.                      if(lastTapTime > 0 && Time.realtimeSinceStartup - lastTapTime <= Settings.DoubleTapThreshold)
8.                      {
9.                             tapCount++;
10.                             if(tapCount == 2)
11.                             {
12.                                    OnDoubleTap(position);
13.                             }
14.                      }
15.                      else
16.                      {
17.                             tapCount = 1;
18.                             OnSingleTap(position);
19.                      }
20.  
21.                      Engine.EventHandler.InvokeTextTap(tapCount, position);
22.                      lastTapTime = Time.realtimeSinceStartup;
23.                      TextNavigator.HideActionBar();
24.               }
25.               else if(Input.GetMouseButtonUp(1)) //Right mouse button was clicked
26.               {
27.                      if(Engine.HasSelection)
28.                      {
29.                             int visibleCaretPosition = TextNavigator.DetermineVisibleCaretPosition(position);
30.                             if(visibleCaretPosition < Engine.VisibleSelectionStartPosition || visibleCaretPosition >= Engine.VisibleSelectionEndPosition) //Only change caret if clicked outside of selection
31.                             {
32.                                    TextNavigator.ResetCaret(position);
33.                             }
34.                      }
35.                      else
36.                      {
37.                             TextNavigator.ResetCaret(position);
38.                      }
39.                      TextNavigator.ShowActionBar();
40.               }
41.  
42.               return true;
43.        }
44.  
45.        return false;
46. }

 

@fennecx_support Interesting side effect of triple click to highlight and then back space. the white-space/blanks between the words are not removed. Should removing them also be the default behaviour? There is a difference between click drag select of all words followed by a backspace key vs triple click and backspace. Is it possible to make the behaviour the same?

 

How to make the Content object to center vertically, if I change the anchors it resets to the default value. I want the text to be center-aligned inside the input field, but if I resize the input, the text stays top anchored.

 

Ok, I think I figured it out. It only works with Middle text alignment, using Capline/Midline has no effect.

 

Might have been a bit of a miscommunication: I thought when you said highlight all words individually and then remove all words with backspace that you meant to remove all words individually from the text too. Essentially leaving only whitespaces behind in the text.
But it should be easy to just let it clear all the text in this scenario:
Change RemoveHighlightedWords() method in MultiTextSelectionHandler.cs to this:

Code (CSharp):

1. private void RemoveHighlightedWords()
2. {
3.        if(textSelectionRegions.Count == 0) //Nothing highlighted
4.        {
5.               return;
6.        }
7.  
8.        inputField.Text = string.Empty;
9.        ClearHighlight();
10. }

 

I have been trying to implement the Emoji Asset Generator with some difficulty.

I followed the instructions here:
https://www.dropbox.com/s/s8a5t1bj2lov9eb/Documentation.pdf?dl=0

I went to:
https://github.com/iamcal/emoji-data

And downloaded "emoji.json" and "sheet_twitter_32.png". I put them in a folder Assets/Emoji in my project. I went to Tools > Advanced Input Field > Emoji Asset Generator. I dragged the "emoji.json" file onto the "Emoji list" field and the "sheet_twitter_32.png" onto the "Sprite Sheet" field.

I then pressed "Generate Emoji Asset" (grid size 32x32, padding 1x1, spacing 2x2) and it outputs the following error to Console:

Code (csharp):

1. No sprites found
2. UnityEngine.Debug:LogWarning (object)
3. AdvancedInputFieldPlugin.Editor.EmojiAssetGenerator:DrawEditor () (at Assets/AdvancedInputField/Editor/Scripts/EmojiAssetGenerator.cs:107)
4. AdvancedInputFieldPlugin.Editor.EmojiAssetGenerator:OnGUI () (at Assets/AdvancedInputField/Editor/Scripts/EmojiAssetGenerator.cs:57)
5. UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

I tried changing the settings on "sheet_twitter_32.png" with "Texture Type" set as "Default" or "Sprite (2D and UI)." For "Sprite", I tried "Sprite Mode Single" or "Multiple." All settings I tried gave the same error.

I also tried under Sprite Mode Multiple going in the Sprite Editor and creating a slice grid with pixel size 32x32, offset 1x1, padding 2x2 but this also didn't help. Same error.

Is there some extra step that is missing? Do you know what I am doing wrong or what I should try next?

Thanks as always for your help.

 

Hi @fennecx_support

I bought your plugin this week, and starting to test it.
I noticed that text selection highlight appears "over text" in unity editor, and it hides the text
unity's own input field shows selection highlight below text

Please advise

 

I've send you a PM.

 

Not really sure what you mean.
Unity's official inputfield also renders over the text. (See below example)


AdvancedInputfield does the same:

 

Strange, on Unity 2020.3.23 , in your native plugin "text" appear behinds after i select it so its sort of hidden
What ill do is create a new component and see if that issue is there as well

thanks for the prompt reply

 

https://we.tl/t-oGN4dmFoO0

Here is the bug visible

BTW, one reason might be that im using canvas with custom sort order that changes on runtime
if you are using canvas sort order, how do i set it?

 

OK, Haven't seen that before.
Don't really think the canvas sort order would cause this behaviour, because it does look like the selection is rendered in front of the text. The only thing I can think is that the alpha/transparency of the color is full opaque. Maybe check if the alpha value of the "Selection Color" property on the AdvancedInputField (in inspector) is not 1.

 

Yes, making it obque shows that its in front of text, unity's own textinput field selections is behind
I'm using Unity 2020.3.23, maybe test it there?

 

Hello,

Is it possible to hide the suggestions list above the keyboard on Android and iOS with the Advanced Input Field 2 Plugin?

 

Ah, didn't notice the difference before.
Anyways I've added a new property called "selectionBehindText" to AdvancedInputfield instances to control whether the selection should be rendered behind or in front the text.


Use the attached patch package to add this property.

 

Not really, the plugin already tries to set the flag in native code to disable this by default, but a lot of (newer) devices ignore this flag and show it anyways.

 

Awesome