前端之家收集整理的这篇文章主要介绍了
cocos-js (web端)输入框功能实现,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_404_1@var textInputGetRect @H_404_1@= function (node) {
@H_404_1@var rc @H_404_1@= cc.rect(node.x,node.y,node.width,node.height);
rc.x @H_404_1@-= rc.width @H_404_1@/ 2;
rc.y @H_404_1@-= rc.height @H_404_1@/ 2;
@H_404_1@return rc;
};
@H_404_1@var InputComponent @H_404_1@= cc.Layer.extend({
_trackNode@H_404_1@:null,_beginPos@H_404_1@:null,ctor@H_404_1@:function () {
@H_404_1@this._super();
@H_404_1@if( 'touches' @H_404_1@in cc.sys.capabilities ){
cc.eventManager.addListener({
event@H_404_1@: cc.EventListener.TOUCH_ALL_AT_ONCE,onTouchesEnded@H_404_1@: this.onTouchesEnded
},@H_404_1@this);
} @H_404_1@else if ('mouse' @H_404_1@in cc.sys.capabilities )
cc.eventManager.addListener({
event@H_404_1@: cc.EventListener.MOUSE,onMouseUp@H_404_1@: this.onMouseUp
},@H_404_1@this);
},onClickTrackNode@H_404_1@:function (clicked) {
},onTouchesEnded@H_404_1@:function (touches,event) {
@H_404_1@var target @H_404_1@= event.getCurrentTarget();
@H_404_1@if (@H_404_1@!target._trackNode)
@H_404_1@return;
// grab first touch
@H_404_1@if(touches.length @H_404_1@== 0)
@H_404_1@return;
@H_404_1@var touch @H_404_1@= touches[0];
@H_404_1@var point @H_404_1@= touch.getLocation();
@H_404_1@var rect @H_404_1@= textInputGetRect(target._trackNode);
target.onClickTrackNode(cc.rectContainsPoint(rect,point));
//cc.log("----------------------------------");
},onMouseUp@H_404_1@:function (event) {
@H_404_1@var target @H_404_1@= event.getCurrentTarget();
@H_404_1@if (@H_404_1@!target._trackNode)
@H_404_1@return;
@H_404_1@var point @H_404_1@= event.getLocation();
@H_404_1@var rect @H_404_1@= textInputGetRect(target._trackNode);
target.onClickTrackNode(cc.rectContainsPoint(rect,point));
}
});
@H_404_1@var TextFieldTTFDefaultTest @H_404_1@= InputComponent.extend({
_charLimit@H_404_1@:20,_textField@H_404_1@:null,ctor@H_404_1@:function () {
@H_404_1@this._super();
},onEnter@H_404_1@:function () {
@H_404_1@this._super();
@H_404_1@var winSize @H_404_1@= cc.director.getWinSize();
@H_404_1@this._textField @H_404_1@= new cc.TextFieldTTF("<click here for input>","Arial",36);
@H_404_1@this._textField.setColor(cc.color(0xff0000));
@H_404_1@this.addChild(@H_404_1@this._textField);
//this._textField.setDelegate(this);
@H_404_1@this._textField.x @H_404_1@= winSize.width @H_404_1@/ 2;
@H_404_1@this._textField.y @H_404_1@= winSize.height @H_404_1@/3;
@H_404_1@this._trackNode @H_404_1@= this._textField;
},callbackRemoveNodeWhenDidAction@H_404_1@:function (node) {
@H_404_1@this.removeChild(node,@H_404_1@true);
},onClickTrackNode@H_404_1@:function (clicked) {
@H_404_1@var textField @H_404_1@= this._trackNode;
@H_404_1@if (clicked) {
// TextFieldTTFTest be clicked
//cc.log("TextFieldTTFDefaultTest:CCTextFieldTTF attachWithIME");
textField.attachWithIME();
} @H_404_1@else {
// TextFieldTTFTest not be clicked
//cc.log("TextFieldTTFDefaultTest:CCTextFieldTTF detachWithIME");
textField.detachWithIME();
}
},onTextFieldAttachWithIME@H_404_1@:function (sender) {
@H_404_1@return false;
},onTextFieldDetachWithIME@H_404_1@:function (sender) {
@H_404_1@return false;
},onTextFieldInsertText@H_404_1@:function (sender,text,len) {
// if insert enter,treat as default to detach with ime
@H_404_1@if ('\n' @H_404_1@== text) {
@H_404_1@return false;
}
// if the textfield's char count more than m_nCharLimit,doesn't insert text anymore.
@H_404_1@if (sender.getCharCount() @H_404_1@>= this._charLimit) {
@H_404_1@return true;
}
@H_404_1@return false;
},onTextFieldDeleteBackward@H_404_1@: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;
@H_404_1@return false;
},onDraw@H_404_1@:function (sender) {
@H_404_1@return false;
}
});