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;
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!