cocos2djs实现输入框效果

发布日期:2016-10-20 15:48:00

var textInputGetRect = function (node) {
    var rc = cc.rect(node.x, node.y, node.width, node.height);
    rc.x -= rc.width / 2;
    rc.y -= rc.height / 2;
    return rc;
};


var TextInputLayer = cc.Layer.extend({

    _nameNode: null,
    _pwdNode:null,
    _beginPos: null,
    _charLimit:6,
    ctor: function () {
        this._super();
        this.init();


        return true;
    },


    init: function () {
        var size = cc.winSize;


        if ('touches' in cc.sys.capabilities) {
            cc.eventManager.addListener({
                event: cc.EventListener.TOUCH_ALL_AT_ONCE,
                onTouchesEnded: this.onTouchesEnded
            }, this);
        } else if ('mouse' in cc.sys.capabilities)
            cc.eventManager.addListener({
                event: cc.EventListener.MOUSE,
                onMouseUp: this.onMouseUp
            }, this);


        var textName = new cc.TextFieldTTF("<请输入姓名>",
            "song",
            22);
        this.addChild(textName);
        textName.x = size.width / 2;
        textName.y = size.height / 2 + 40;


        this._nameNode = textName;


        textName.setDelegate(this);


        var textPwd = new cc.TextFieldTTF("<请输入密码>",
            "song",
            22);
        this.addChild(textPwd);
        textPwd.x = size.width / 2;
        textPwd.y = size.height / 2 - 40;


        this._pwdNode = textPwd;


        textPwd.setDelegate(this);
    },


    onClickNameNode: function (clicked) {
        var nameField = this._nameNode;
        if (clicked) {
            nameField.attachWithIME();
        } else {
            nameField.detachWithIME();
        }
    },


    onClickPwdNode: function (clicked) {
        var pwdFiled = this._pwdNode;
        if (clicked) {
            pwdFiled.attachWithIME();
        } else {
            pwdFiled.detachWithIME();
        }
    },


    onTouchesEnded: function (touches, event) {
        var target = event.getCurrentTarget();
        
        if (!target._nameNode)
            return;


        if (!target._pwdNode)
            return;


        if (touches.length == 0)
            return;


        var touch = touches[0];
        var point = touch.getLocation();


        var rectName = textInputGetRect(target._nameNode);
        target.onClickNameNode(cc.rectContainsPoint(rectName, point));


        var rectPwd = textInputGetRect(target._pwdNode);
        target.onClickPwdNode(cc.rectContainsPoint(rectPwd, point));
    },


    onMouseUp: function (event) {
        var target = event.getCurrentTarget();
        if (!target._nameNode)
            return;


        if (!target._pwdNode)
            return;


        var point = event.getLocation();


        var rectName = textInputGetRect(target._nameNode);
        target.onClickNameNode(cc.rectContainsPoint(rectName, point));


        var rectPwd = textInputGetRect(target._pwdNode);
        target.onClickPwdNode(cc.rectContainsPoint(rectPwd, point));
    },




    onTextFieldAttachWithIME: function (sender) {
        return false;
    },
    onTextFieldDetachWithIME: function (sender) {
        return false;
    },


    onTextFieldInsertText: function (sender, text, len) {
        if ('\n' == text) {
            return false;
        }


        if (sender.getCharCount() >= this._charLimit) {
            return true;
        }


        return false;
    },


    onTextFieldDeleteBackward: function (sender, delText, len) {
        return false;
    },




});