Regarding text input with keypad and input box

cocos2d-x C++
1

How can I achieve this kind of keypad with editable input box ?

Screenshot_20161114-153320.png720×1101 108 KB

IMG_3053.jpg1536×751 113 KB

I tried ui::textfield and used attachWithIME but it gives normal keypad only no input box like in the screenshots. The keypad must appear when a menu item is tapped and on enter/return the typed texts must be applied to a textfield.

And another big issue is, if I open keypad using attachWithIME() through tapping on a button it doesn’t get detached or go away when I tap on the other screen area. How can I force the open keypad to go away ?

@nite @SonarSystems @zhangxm @pabitrapadhy

2

I will ask @owen to take a look.

3

For implementing this kind of input box, you have to hack the EditBox implementation or just get inspirations from EditBox and implement your own one.

And you should take care of the implementation details of both iOS and Android, which is a little bit tricky.

I suggest you give ui::EditBox a try, you could refer to EditBox test case in cpp-tests.

If it’s still not what you want, you might have to implement your own one.

4

Ok let’s forget about the keypad with input box that was in the screenshot.

I was able to show the keypad when I tap on a button (menuItemImage) using attachWithIME. But the keypad is not going away when I tap on other area in the screen. How can I do that ? If I just tap on the textfield or editbox it works. The keypad goes away when tapped on the other area. But if the keypad is brought by using textfield->attachWithIME() then it doesn’t go away unless it’s tapped on the enter/return key.
Could you also explain what is the use of these two methods ?
setDetachWithIME and setAttachWithIME

5

One possible solution is adding an additional layer on the screen, which closes the keyboard after clicking on it:

 class MyTextField : public TextFieldTTF {
      EventListenerTouchOneByOne* _absortAllTouchesListener;

      MyTextField(){
          _absortAllTouchesListener = nullptr;
      }


      void TextField::activateAbsorbAllTouches(){
          if (_absortAllTouchesListener == nullptr){
              _absortAllTouchesListener = cocos2d::EventListenerTouchOneByOne::create();
              _absortAllTouchesListener->setSwallowTouches(true);
              _absortAllTouchesListener->onTouchBegan = [=] (cocos2d::Touch*, cocos2d::Event*) -> bool {
                 return true;
              };
              _absortAllTouchesListener->onTouchEnded = [=] (cocos2d::Touch*, cocos2d::Event*) {
                  detachWithIME();
              };
              this->getEventDispatcher()->addEventListenerWithFixedPriority(_absortAllTouchesListener, -1);
          }
      }

      void deactivateAbsorbAllTouches(){
          if (_absortAllTouchesListener != nullptr){
              this->getEventDispatcher()->removeEventListener(_absortAllTouchesListener);
              _absortAllTouchesListener = nullptr;
          }
      }

     //use it on opening/closing the keyboard
     bool onTextFieldAttachWithIME(TextFieldTTF * sender){
          activateAbsorbAllTouches();
          return false;
     }

     bool TextField::onTextFieldDetachWithIME(TextFieldTTF * sender){
         deactivateAbsorbAllTouches();
         return false;
     }
 };
6

@siarsky: Thanks for your input but I’m bit confused here. How do I catch the event of attaching and detaching of the keypad ? I was using ui:TextField, but with textFieldTTF I wasn’t able to add an event listener. And with ui::textField can’t call detachWithIME() :frowning: . It’d be great if you could guide me further.

1 Like
7

https://184.169.198.12/t/cc-editbox-show-virtual-keyboard-automatically/19800/5