ProgrammingGuide > UI > EditBox

EditBox

Introduction


EditBox is a wrapper of system control for user input. It’s an subclass of cocos2d::ui::Widget. You can use this widget to gather small chunk of text from the user on iOS, Android, Mac, Windows and WP8.

Editbox does not support line breaks and wrapping, which means that Editbox only can be used for single line text. It can't be used as TextArea for displaying multiline text.

How to use

The usage of EditBox is very easy since you only need a few lines of code as bellow.

Create an EditBox for normal text input

1
2
3
4
5
6
7
8
9
10
11
12
       std::string pNormalSprite = "extensions/green_edit.png";
        _editName = ui::EditBox::create(editBoxSize, ui::Scale9Sprite::create(pNormalSprite));
        _editName->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height*3/4));
        _editName->setFontName("Paint Boy");
        _editName->setFontSize(25);
        _editName->setFontColor(Color3B::RED);
        _editName->setPlaceHolder("Name:");
        _editName->setPlaceholderFontColor(Color3B::WHITE);
        _editName->setMaxLength(8);
        _editName->setReturnType(ui::EditBox::KeyboardReturnType::DONE);
        _editName->setDelegate(this);
        addChild(_editName);

Create an EditBox for password input

1
2
3
4
5
6
7
8
9
10
       _editPassword = ui::EditBox::create(editBoxSize, "extensions/orange_edit.png");
        _editPassword->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height/2));
        _editPassword->setFont("American Typewriter", 80);
        _editPassword->setFontColor(Color3B::GREEN);
        _editPassword->setPlaceHolder("Password:");
        _editPassword->setMaxLength(6);
        _editPassword->setInputFlag(ui::EditBox::InputFlag::PASSWORD);
        _editPassword->setInputMode(ui::EditBox::InputMode::SINGLE_LINE);
        _editPassword->setDelegate(this);
        addChild(_editPassword);

Create an EditBox for email input

1
2
3
4
5
6
7
       _editEmail = ui::EditBox::create(Size(editBoxSize.width, editBoxSize.height), "extensions/yellow_edit.png");
         _editEmail->setPosition(Vec2(visibleOrigin.x+visibleSize.width/2, visibleOrigin.y+visibleSize.height/4));
        _editEmail->setAnchorPoint(Vec2(0.5, 1.0f));
        _editEmail->setPlaceHolder("Email:");
        _editEmail->setInputMode(ui::EditBox::InputMode::EMAIL_ADDRESS);
        _editEmail->setDelegate(this);
        addChild(_editEmail);

editbox-normal.png (139.8 kB) owen, 2014-12-05 08:45

editbox-password.png (131.1 kB) owen, 2014-12-05 08:45

editbox-email.png (133.9 kB) owen, 2014-12-05 08:45

Sign up for our newsletter to keep up with the latest developments, releases and updates for Cocos2d-x.