Hello!
I’m attempting to create a custom keyboard, using Button component in place of a keyboard stroke that will type into a text field. I was hoping I could utilize the EditBox component for this? But every time I click anywhere outside the input field (my buttons), it loses focus.
I require the typical text field functionality - like the blinking cursor that shows you what character you’re on, the ability to shift that cursor backwards into the string to edit it, and that scroll effect you get when the character length exceeds the form’s width that pushes the text towards the left.
What I’m creating will be used for both web browser and mobile.
Mobile wont utilize this custom keyboard. Instead, the desired result is for the mobile device’s native keyboard to appear instead of the custom art.
Is this possible to achieve? I’ve tried looking around for answers. Can’t seem to find any. I’ll keep looking around nevertheless.
Is there any more info I should provide?
Using version Cocos Creator 2.3.4
Any help is appreciated. Even if it’s just keywords to look up.
The input text field is depend native component, no come from engine, so loses focus is normal.
I suggest you could give some diagrams to illustrate what you are implementing to get more help!
Thank you so much for getting back to me.
Does this image help? If not, let me know where I could improve it to clarify my design.
It’s a simplified version of what I’m working with (since in reality, I’m creating a full alphabet and numerical keyboard, with custom art).
Each key is a node with a Button component.
Then, I have up to 2 nodes, each with an EditBox component that they player can go back and forth to edit.
The desired result is for the press of a key to emulate a keystroke.
I could just make it where each key button holds the string of it’s character as custom event data that gets pushed into a function that simply changes the string of the EditBox’s label.
But doing so makes me lose the blinking cursor that lets the player know what character they’re at, if they were to use the left/right-arrow keys (which will be part of the custom keyboard), and I also lose that scrolling functionality, when a string’s width is wider than the viewport mask.
On web platform, there has a native editor component cover on the cc.Editbox component. And native platform, such as Android, there also has a native editor component on the roof of keyboard, no easy to change these designs.Changing this design would require a lot of code changes.
It sounds like I’m better off just creating my own keyboard functionality from scratch, rather than trying to utilize EditBox, if I want to use buttons as keys.
Thank you for taking your time to answer me.
I’ve now been trying to create the keyboard input manually, where pressing a UI key button will change the string value of a label.
This works fine. But 2 new problems have come up for me though.
1 - For some reason, after I’ve typed in 96 characters (exactly 96 - and I’ve tried it on multiple labels too), any new characters that I type in after that don’t get rendered. They show up as empty space, yet the computer is still detecting that new characters have been added to the string when I console log the string’s length.
Should I create a new thread about this issue or keep it here?
2 - I’ve been re-calculating the width of the label, every time a new character is added to the string, and then adjusting the position of the label, changing it’s X position. The problem is that there seems to be a delay when the width is calculated. With each trigger of the function that handles this calculation, the results displayed only reflect what should have been the previous trigger’s calculation.
example:
I just pressed the key for letter “a” - so now the width of the string should be wider by lets say 20px.
If I console log the previous width (saved in variable lastWidth), and console.log the new width, they’re the same.
Now - if I add a scheduleOnce delay of even just .01 seconds, it works.
I don’t know why width isn’t getting calculated quickly enough to work without the delaying scheduler.
(should I also create a new forum post for this)?
You can immediate calculation by call label._updateRenderData(true) .
This problem need provide a test project, I will try.
1 Like
Thank you so much! My first issue is resolved.
I am using version 2.3.4, so I had to use label._forceUpdateRenderData(); instead. I wouldn’t have known about this without your help though!
The second issue you can re-create very easily.
Just create a node with label component, and start typing a bunch of capitalized “W” characters (since it’s a wide character, it’s faster to achieve the length needed to see the cut-off).
55 capitalized W’s using the default Arial font, at the default size of 40. You’ll start noticing that the last W is cut-off. And as you type more in, none get rendered.
LabelStringRendering.zip (803.5 KB)
Just in case, I’ve attached a project with the set up.
I am using version 2.3.4, but I’ve also tested this on version 2.4.2, and the same thing happens there too.
The Label component default cache mode is bitmap, it can only show max size 2048*2048.
You can change Cache Mode to CHAR, it will work fine.
1 Like
That was so simple!
With this, I think I can build what I wanted. Thank you again, @huanxinyin ! 
