cocos2dx3.16输入框：TextField和EditBox的使用

cocos2dx3.16引擎为我们提供了两类编辑框的控件：

        （1）CCTextFieldTTF（基于CCLabelTTF）

self.textField = self.node_root:getChildByName("TextField")
self.textField:setSingleLineEnabled(false)  -- true：单行输入 false：多行输入
-- self.textField:setFontName("res/font/Arial.ttf")
-- self.textField:setInputMode(cc.EDITBOX_INPUT_MODE_ANY)  -- ExtensionConstants.lua
self.textField:addEventListener(function(sender, eventType)
    -- GuiConstants.lua
    if eventType == 0 then
        -- print("ccui.TextFiledEventType.attach_with_ime")
    elseif eventType == 1 then
        -- print("ccui.TextFiledEventType.detach_with_ime")
    elseif eventType == 2 then
        -- print("ccui.TextFiledEventType.insert_text")
        print(sender:getString())
    elseif eventType == 3 then
        -- print("ccui.TextFiledEventType.delete_backward")
    end
end)

（2）CCEditBox（基于CCControlButton）

self.editBox_bg = self.node_root:getChildByName("editBox_bg")
self.editBox = ccui.EditBox:create(self.editBox_bg:getContentSize(), "res/editbox_bg.png", ccui.TextureResType.plistType)
self.editBox:setPlaceHolder("占位文本")
self.editBox:setInputMode(6)
self.editBox:setInputFlag(cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD)  -- ExtensionConstants.lua
self.editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE)  -- ExtensionConstants.lua
self.editBox:setAnchorPoint(cc.p(0, 0.5))
self.editBox:setPosition(self.editBox_bg:getPosition())
self.editBox:setFontColor(cc.c3b(255, 255, 255))
self.editBox:registerScriptEditBoxHandler(function(eventType)
    if eventType == "began" then
        -- print("began")
    elseif eventType == "return" or eventType == "ended" then
        -- print(eventType)
        print(self.editBox:getText())
    elseif eventType == "changed" then
        -- print("changed")
    end
end)
self.node_root:addChild(self.editBox)

（3）使用Text显示多行内容模拟EditBox多行输入：

-- 用于显示EditBox输入的内容
self.showText = self.node_root:getChildByName("Text")
self.showText:setTouchEnabled(false)
self.showText:setString("占位文本")
 
-- 可点击的背景图片，点击触发EditBox的点击事件
self.editBox_bg = self.node_root:getChildByName("editBox_bg")
self.editBox_bg:setTouchEnabled(true)
self.editBox_bg:addTouchEventListener(function(sender, eventType)
    if eventType == ccui.TouchEventType.ended then
        self.editBox:touchDownAction(self.editBox, ccui.TouchEventType.ended)
    end
end)
 
-- EditBox，隐藏
self.editBox = ccui.EditBox:create(self.editBox_bg:getContentSize(), "res/editbox_bg.png", ccui.TextureResType.plistType)
self.editBox:setInputMode(6)
self.editBox:setInputFlag(cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD)  -- ExtensionConstants.lua
self.editBox:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE)  -- ExtensionConstants.lua
self.editBox:setAnchorPoint(cc.p(0, 1))
self.editBox:setPosition(self.editBox_bg:getPosition())
self.editBox:setFontColor(cc.c3b(255, 255, 255))
self.editBox:setVisible(false)
self.editBox:registerScriptEditBoxHandler(function(eventType)
    if eventType == "return" or eventType == "ended" then
        local str = self.editBox:getText()
        if str ~= "" then
            -- 输入内容用Text显示
            self.showText:setString(str)
        end
    end
end)
self.node_root:addChild(self.editBox)

【小知识】

    IME：        是指Input Method Editors，即输入法编辑器。

    placeholder：默认显示的内容。即编辑框的输入内容为空时，显示的内容。

    默认内容：   当编辑框的输入内容为空时，显示的内容。

    输入内容：   使用虚拟键盘，输入到编辑框中的内容。

【3.x】

    （1）去掉“CC”

    （2）设置虚拟键盘的编辑类型：> EditBoxInputMode 变为强枚举 EditBox::EditBoxInputMode

//
    SINGLE_LINE                 //开启任何文本的输入键盘（不含换行）
    ANY                         //开启任何文本的输入键盘（含换行）
    DECIMAL                     //开启 数字 输入类型键盘（含小数点）
    PHONE_NUMBER                //开启 电话号码 输入类型键盘
    EMAIL_ADDRESS               //开启 邮件地址 输入类型键盘
    NUMERIC                     //开启 数字符号 输入类型键盘
    URL                         //开启 URL 输入类型键盘
//

（3）设置输入的文本类型 ：> EditBoxInputFlag 变为强枚举 EditBox::EditBoxInputFlag

//
    PASSWORD                    //密码形式
    SENSITIVE                   //敏感数据输入
    INITIAL_CAPS_WORD           //每个单词首字符大写，并有提示
    INITIAL_CAPS_SENTENCE       //第一句首字符大写，并有提示
    INTIAL_CAPS_ALL_CHARACTERS  //自动大写
//

4）设置虚拟键盘中return键显示的字符： > KeyboardReturnType 变为强枚举 EditBox::KeyboardReturnType

//
    DEFAULT                     //默认类型, "←"
    DONE                        //Done字样, "确定"
    SEND                        //Send字样, "发送"
    SEARCH                      //Search字样, "搜索"
    GO                          //Go字样, "链接"
//

（5）其他变化不大。

【CCEditBox】

    让我们先看一下CCEditBox的继承关系：

CCEditBox的父类为：按钮控件类CCControlButton、输入法代理类CCIMEDelegate。

    其中CCControlButton之前是讲过的，它是一个具有许多按钮事件，且使用CCScale9Sprite作为背景图片的按钮类。而CCIMEDelegate这个类主要是为子类提供了虚拟键盘的输入功能。

    根据其继承关系，我们大致也可以猜测到CCEditBox是怎么实现的吧？如果说CCTextFieldTTF是一个动态的CCLabelTTF，那么可以将CCEditBox看做是一个动态的CCControlButton，通过不断监听输入的字符，动态设置按钮的标签内容。

    其实CCEditBox的用法和CCTectFieldTTF是非常相似的。不过主要的区别在于

使用CCEditBox创建的编辑框，不用额外的代码处理，点击编辑框区域就可以跳出键盘，点击非编辑框区域就可以隐藏键盘。而CCTectFieldTTF却需要手动处理。即父类CCIMEDelegate向子类提供的函数：attachWithIME()、detachWithIME()，对于CCEditBox而言，不需要手动进行处理。

1、引入头文件和命名空间

#include "../cocos/ui/UIEditBox/UIEditBox.h"

类要继承于：EditBoxDelegate

class Management : public cocos2d::Scene, public EditBoxDelegate

2、创建方式

//
    //create('编辑框大小', '按钮正常背景', '按钮按下背景', '按钮禁用背景');
    static CCEditBox* create(const CCSize& size, CCScale9Sprite* pNormal9SpriteBg, 
        CCScale9Sprite* pPressed9SpriteBg = NULL, CCScale9Sprite* pDisabled9SpriteBg = NULL);
 
    //举例：
    //CCSize editBoxSize = CCSizeMake(300, 60);
    //CCEditBox* editBoxName = CCEditBox::create(editBoxSize, CCScale9Sprite::create("green_edit.png"));
//

3、委托代理

//
    //设置编辑框的委托代理对象，一般为this
    //并且CCLayer必需要继承代理接口类CCEditBoxDelegate。
    void setDelegate(CCEditBoxDelegate* pDelegate);
    CCEditBoxDelegate* getDelegate();
 
    //举例：
    /editBoxName->setDelegate(this);
//

4、常用操作

    设置默认内容，输入内容，字体资源名、大小、颜色，最大字符数，编辑框尺寸大小。

//
/**
 *     setPlaceHolder , setPlaceholderFont ,
 *     setText , setFont , setMaxLength , 
 *     setPreferredSize
 */
    //设置编辑框的默认内容。即当输入内容为空时，显示的内容。
    void setPlaceHolder(const char* pText);
    const char* getPlaceHolder(void);
 
    //设置默认内容的字体
    //      pFontName   字体资源名
    //      fontSize    字体大小
    //      color       字体颜色
    void setPlaceholderFont(const char* pFontName, int fontSize);
    void setPlaceholderFontName(const char* pFontName);
    void setPlaceholderFontSize(int fontSize);
    void setPlaceholderFontColor(const ccColor3B& color);
 
 
    //设置编辑框的输入内容setText
    void setText(const char* pText);
    const char* getText(void);
 
    //设置输入内容的字体
    //      pFontName   字体资源名
    //      fontSize    字体大小
    //      color       字体颜色
    void setFont(const char* pFontName, int fontSize);
    void setFontName(const char* pFontName);
    void setFontSize(int fontSize);
    void setFontColor(const ccColor3B& color);
 
 
    //输入字符控制，允许输入的最大字符长度
    void setMaxLength(int maxLength);
    int getMaxLength();
 
 
    //设置编辑框大小
    void setPreferredSize(CCSize size);
//

5、设置编辑框的模式类型

   虚拟键盘的类型、文本类型、虚拟键盘中return键显示的字符。

//
/**
 *     setInputMode ,
 *     setInputFlag ,
 *     setReturnType
 */
    //设置虚拟键盘的编辑类型EditBoxInputMode
    //      kEditBoxInputModeSingleLine                     //开启任何文本的输入键盘（不含换行）
    //      kEditBoxInputModeAny                            //开启任何文本的输入键盘（含换行）
    //      kEditBoxInputModeDecimal                        //开启 数字 输入类型键盘（含小数点）
    //      kEditBoxInputModePhoneNumber                    //开启 电话号码 输入类型键盘
    //      kEditBoxInputModeEmailAddr                      //开启 邮件地址 输入类型键盘
    //      kEditBoxInputModeNumeric                        //开启 数字符号 输入类型键盘
    //      kEditBoxInputModeUrl                            //开启 URL 输入类型键盘
    void setInputMode(EditBoxInputMode inputMode);
 
      
    //设置输入的文本类型EditBoxInputFlag
    //      kEditBoxInputFlagPassword                       //密码形式
    //      kEditBoxInputFlagSensitive                      //敏感数据输入
    //      kEditBoxInputFlagInitialCapsWord                //每个单词首字符大写，并有提示
    //      kEditBoxInputFlagInitialCapsSentence            //第一句首字符大写，并有提示
    //      kEditBoxInputFlagInitialCapsAllCharacters       //自动大写
    void setInputFlag(EditBoxInputFlag inputFlag);
 
 
    //设置虚拟键盘中return键显示的字符
    //      kKeyboardReturnTypeDefault                      //默认类型, "←"
    //      kKeyboardReturnTypeDone                         //Done字样, "确定"
    //      kKeyboardReturnTypeSend                         //Send字样, "发送"
    //      kKeyboardReturnTypeSearch                       //Search字样, "搜索"
    //      kKeyboardReturnTypeGo                           //Go字样, "链接"
    void setReturnType(KeyboardReturnType returnType);
//

6、事件委托代理接口类CCEditBoxDelegate

    CCEditBoxDelegate类主要是用来侦听CCEditBox的使用状态，并设置事件的回调响应函数。

    使用方法：在创建CCEditBox类的CCLayer类中，让CCLayer继承CCEditBoxDelegate，并重写如下四个事件回调响应函数。

    整个编辑框的编辑过程为：开始编辑 => 文字改变 => 结束编辑 => 返回return。

//
    //开始编辑时
    virtual void editBoxEditingDidBegin(CCEditBox* editBox);
    //结束编辑时
    virtual void editBoxEditingDidEnd(CCEditBox* editBox);
    //编辑框文字改变时
    virtual void editBoxTextChanged(CCEditBox* editBox, const std::string& text);
    //触发return后
    virtual void editBoxReturn(CCEditBox* editBox);
//

7、使用技巧

    （1）创建CCEditBox后，设置编辑框的委托代理对象为当前CCLayer层，即setDelegate(this)。只有这样，继承于CCEditBoxDelegate的CCLayer就可以响应编辑框的事件，并执行回调函数。

    （2）通过重写CCEditBoxDelegate的四个回调函数，来对编辑框的不同状态事件进行处理。

class Management : public cocos2d::Scene, public EditBoxDelegate
{
public:
    static cocos2d::Scene* createScene();

    virtual bool init();
    
    // a selector callback
	void touchCallBack(cocos2d::Ref* pSender, TouchEventType type);
    
    // implement the "static create()" method manually
	CREATE_FUNC(Management);

	virtual void editBoxEditingDidBegin(EditBox* editBox);
	virtual void editBoxEditingDidEnd(EditBox* editBox);
	virtual void editBoxTextChanged(EditBox* editBox, const std::string &text);
	virtual void editBoxReturn(EditBox *editBox);
};

#endif // __MANAGERMENT_SCENE_H__






void Management::GetLogonAccPwd()
{
	auto _acc = (TextField*)m_LogonNode->getChildByName("TextField_1");
	_acc->setVisible(false);
	auto _img1 = (ImageView*)m_LogonNode->getChildByName("Image_1");
	_img1->setVisible(false);

	auto accBox = EditBox::create(_img1->getContentSize(), Scale9Sprite::create("management/img_inputBg.png"));
	accBox->setPosition(_img1->getPosition());
	accBox->setAnchorPoint(CCPoint::ANCHOR_MIDDLE);
	accBox->setFontSize(36);
	accBox->setFontColor(Color3B::WHITE);//Color3B(0, 0, 0)
	accBox->setPlaceHolder(_acc->getPlaceHolder().c_str());
	accBox->setReturnType(EditBox::KeyboardReturnType::DONE);
	accBox->setInputMode(EditBox::InputMode::SINGLE_LINE);
	//accBox->setTouchEnabled(true);
	accBox->setDelegate(this);
	accBox->setMaxLength(20);
	accBox->setTag(101);
	m_LogonNode->addChild(accBox);

	//
	auto _pwd = (TextField*)m_LogonNode->getChildByName("TextField_2");
	_pwd->setVisible(false);
	auto _img2 = (ImageView*)m_LogonNode->getChildByName("Image_2");
	_img2->setVisible(false);

	auto pwdBox = EditBox::create(_img2->getContentSize(), Scale9Sprite::create("management/img_inputBg.png"));
	pwdBox->setPosition(_img2->getPosition());
	pwdBox->setAnchorPoint(CCPoint::ANCHOR_MIDDLE);
	pwdBox->setFontSize(36);
	pwdBox->setFontColor(Color3B::WHITE);
	pwdBox->setPlaceHolder(_pwd->getPlaceHolder().c_str());
	pwdBox->setReturnType(EditBox::KeyboardReturnType::DONE);
	pwdBox->setInputMode(EditBox::InputMode::SINGLE_LINE);
	pwdBox->setInputFlag(EditBox::InputFlag::PASSWORD);
	//pwdBox->setTouchEnabled(true);
	pwdBox->setDelegate(this);
	pwdBox->setMaxLength(20);
	pwdBox->setTag(102);
	m_LogonNode->addChild(pwdBox);

}



void Management::editBoxEditingDidBegin(EditBox *editBox)
{
	CCLOG("start edit");
}
void Management::editBoxEditingDidEnd(EditBox *editBox)
{
	CCLOG("end edit");
}
void Management::editBoxReturn(EditBox *editBox)
{
	CCLOG("editbox return");
}
void Management::editBoxTextChanged(EditBox *editBox, const std::string &text)
{
	auto editbox = (EditBox*)editBox;
	switch (editBox->getTag())
	{
	case 101:
		CCLOG("EditBox_name changed");
		m_account = text;
		break;
	case 102:
		CCLOG("EditBox_password changed");
		m_password = text;
		break;
	default:
		break;
	}
	CCLOG("acc:%s--pwd:%s", m_account.c_str(), m_password.c_str());
}