cocos-js (web端)输入框功能实现

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 InputComponent = cc.Layer.extend({
    _trackNode:null,
    _beginPos:null,
    ctor:function () {
        this._super();
        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);
    },
    onClickTrackNode:function (clicked) {
    },
    onTouchesEnded:function (touches, event) {
        var target = event.getCurrentTarget();
        if (!target._trackNode)
            return;
        // grab first touch
        if(touches.length == 0)
            return;
        var touch = touches[0];
        var point = touch.getLocation();
        var rect = textInputGetRect(target._trackNode);
        target.onClickTrackNode(cc.rectContainsPoint(rect, point));
        //cc.log("----------------------------------");
    },

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

        var point = event.getLocation();
        var rect = textInputGetRect(target._trackNode);
        target.onClickTrackNode(cc.rectContainsPoint(rect, point));
    }
});

var TextFieldTTFDefaultTest = InputComponent.extend({
    _charLimit:20,
    _textField:null,
    ctor:function () {
        this._super();
    },
    onEnter:function () {
        this._super();
        var winSize = cc.director.getWinSize();

        this._textField = new cc.TextFieldTTF("<click here for input>",
            "Arial",
            36);
        this._textField.setColor(cc.color(0xff0000));
        this.addChild(this._textField);
        //this._textField.setDelegate(this);

        this._textField.x = winSize.width / 2;
        this._textField.y = winSize.height /3;
        this._trackNode = this._textField;
    },
    callbackRemoveNodeWhenDidAction:function (node) {
        this.removeChild(node, true);
    },
    onClickTrackNode:function (clicked) {
        var textField = this._trackNode;
        if (clicked) {
            // TextFieldTTFTest be clicked
            //cc.log("TextFieldTTFDefaultTest:CCTextFieldTTF attachWithIME");
            textField.attachWithIME();
        } else {
            // TextFieldTTFTest not be clicked
            //cc.log("TextFieldTTFDefaultTest:CCTextFieldTTF detachWithIME");
            textField.detachWithIME();
        }
    },
    onTextFieldAttachWithIME:function (sender) {
        return false;
    },
    onTextFieldDetachWithIME:function (sender) {
        return false;
    },
    onTextFieldInsertText:function (sender, text, len) {
        // if insert enter, treat as default to detach with ime
        if ('\n' == text) {
            return false;
        }

        // if the textfield's char count more than m_nCharLimit, doesn't insert text anymore.
        if (sender.getCharCount() >= this._charLimit) {
            return true;
        }
        return false;
    },

    onTextFieldDeleteBackward:function (sender, delText, len) {
        // create a delete text sprite and do some action
        // var label = new cc.LabelTTF(delText, "Arial", 36);
        // this.addChild(label);
        //
        // var winSize = cc.director.getWinSize();
        // var endPos = cc.p(-winSize.width / 4.0, winSize.height * (0.5 + Math.random() / 2.0));
        //
        // label.x = endPos.x;
        // label.y = endPos.y;
        return false;
    },
    onDraw:function (sender) {
        return false;
    }
});