How to use tab to switch between 2 EditBox

Cocos Creator
1

Hi all
How to change focus to next EditBox when press Tab.

2

Hi, I don’t use cocos creator but this is my code in cocos2d js

setTabFocus: function (nextTabFocus, previousTabFocus)
{
    this.nextTabFocus = nextTabFocus;
    this.previousTabFocus = previousTabFocus;
    this.onUserKeyDownSelf = this.onUserKeyDown.bind(this);
},

editBoxEditingDidBegin: function (editBox)
{
    this.editBox._edTxt.addEventListener('keydown', this.onUserKeyDownSelf);
},

editBoxEditingDidEnd: function (editBox)
{
    this.editBox._edTxt.removeEventListener('keydown', this.onUserKeyDownSelf);
},

onUserKeyDown: function (evt)
{
    evt = (evt) ? evt : ((event) ? event : null);
    if (!evt)
        return;

    if (evt.keyCode === cc.KEY.tab)
    {
        if (evt.shiftKey)
        {
            if (this.previousTabFocus)
                this.previousTabFocus.onClickLabel();
        } else
        {
            if (this.nextTabFocus)
                this.nextTabFocus.onClickLabel();
        }
        if (evt.preventDefault)
            evt.preventDefault();
    }
},
onClickLabel: function ()
{
    var self = this;
    setTimeout(function() 
    {
        if (self.editBox._edTxt)
            self.editBox._edTxt.focus();
    }, 100);
},
3

Hi @huyhungkun.
Thank you for your help.
I got Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined
in line

editBoxEditingDidBegin: function (editBox)
{
this._edTxt.addEventListener(‘keydown’, this.onUserKeyDownSelf);
},

I use EditBoxTab class extend cc.Editbox but can’t use _edTxt. Here is my code.

cc.Class({
extends: cc.EditBox,

properties: {
    nextTabFocus: cc.EditBox
},

// use this for initialization
onLoad: function () {
    this.onUserKeyDownSelf = this.onUserKeyDown.bind(this);
},

editBoxEditingDidBegin: function (editBox)
{
    this._edTxt.addEventListener('keydown', this.onUserKeyDownSelf);
},

editBoxEditingDidEnd: function (editBox)
{
   this._edTxt.removeEventListener('keydown', this.onUserKeyDownSelf);//_edTxt
},

onUserKeyDown: function (evt)
{
    evt = (evt) ? evt : ((event) ? event : null);
    if (!evt)
        return;

    if (evt.keyCode === cc.KEY.tab)
    {
        this.nextTabFocus._edTxt.focus();
        if (evt.preventDefault)
            evt.preventDefault();
    }
},

});
Do you know why i can’t use this._edTxt in editBoxEditingDidBegin ?

4

The EditBox implementation is different in Creator, in v1.1.2, the DOM input element is only activated when you click on the EditBox, otherwise it’s rendered by Cocos2d renderer, pure Canvas.

I don’t think you can switch EditBox automatically in the current version, @owen what do you think about this request ?

5

@kaka167

Yes, in the current implementation, we won’t show EditBox if you don’t click it. So I think it’s impossible to use TAB to switch EditBox.

7

I mean what do you think about adding something like focus property to EditBox ？

8

Thank all. I hope EditBox will have function like focus soon :frowning: