Cocos Creator 输入框
Cocos Creator 输入框
- # 一、json中的代码
- js中的代码
# 一、json中的代码
//根据id定义这个节点名称为editbox_Account，在js中使用editbox_Account对其进行操作
"editbox_Account":
{
"__id__": 1034
}
editbox节点布局
{
"__type__": "cc.Node",
"_name": "账号EditBox",
"_parent":
{
"__id__": 1014
},
"_children": [
{
"__id__": 1031
},
{
"__id__": 1032
},
{
"__id__": 1033
}],
"_level": 2,
"_components": [
{
"__id__": 1034
}],
"_contentSize":
{
"__type__": "cc.Size",
"width": 230,
"height": 50
},
"_position":
{
"__type__": "cc.Vec3",
"x": 55,
"y": 72
},
"_scale":
{
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
}
},
{
"__type__": "cc.Node",
"_name": "BACKGROUND_SPRITE",
"_parent":
{
"__id__": 1030
},
"_level": 2,
"_components": [
{
"__type__": "cc.Sprite",
"node":
{
"__id__": 1031
},
"_spriteFrame":
{
"__uuid__": "a2MjXRFdtLlYQ5ouAFv/+R"
},
"_type": 1,
"_sizeMode": 0
}],
"_contentSize":
{
"__type__": "cc.Size",
"width": 230,
"height": 50
},
"_scale":
{
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
}
},
{
"__type__": "cc.Node",
"_name": "TEXT_LABEL",
"_parent":
{
"__id__": 1030
},
"_active": false,
"_level": 2,
"_components": [
{
"__type__": "cc.Label",
"node":
{
"__id__": 1032
},
"_fontSize": 30,
"_enableWrapText": false,
"_N$verticalAlign": 1,
"_N$overflow": 1
}],
"_color":
{
"__type__": "cc.Color",
"b": 1
},
"_contentSize":
{
"__type__": "cc.Size",
"width": 228,
"height": 50
},
"_anchorPoint":
{
"__type__": "cc.Vec2",
"y": 1
},
"_position":
{
"__type__": "cc.Vec3",
"x": -113,
"y": 25
},
"_scale":
{
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
}
},
{
"__type__": "cc.Node",
"_name": "PLACEHOLDER_LABEL",
"_parent":
{
"__id__": 1030
},
"_level": 2,
"_components": [
{
"__type__": "cc.Label",
"node":
{
"__id__": 1033
},
"_string": "请输入账号",
"_N$string": "请输入账号",
"_fontSize": 30,
"_lineHeight": 50,
"_enableWrapText": false,
"_N$verticalAlign": 1,
"_N$overflow": 1
}],
"_color":
{
"__type__": "cc.Color",
"r": 187,
"g": 187,
"b": 187
},
"_contentSize":
{
"__type__": "cc.Size",
"width": 228,
"height": 50
},
"_anchorPoint":
{
"__type__": "cc.Vec2",
"y": 1
},
"_position":
{
"__type__": "cc.Vec3",
"x": -113,
"y": 25
},
"_scale":
{
"__type__": "cc.Vec3",
"x": 1,
"y": 1,
"z": 1
}
},
{
"__type__": "cc.EditBox",
"node":
{
"__id__": 1030
},
"_useOriginalSize": false,
"_N$backgroundImage":
{
"__uuid__": "a2MjXRFdtLlYQ5ouAFv/+R"
},
"_N$inputMode": 6,
"_N$fontSize": 30,
"_N$fontColor":
{
"__type__": "cc.Color",
"b": 1
},
"_N$placeholder": "请输入账号",
"_N$placeholderFontSize": 30,
"_N$placeholderFontColor":
{
"__type__": "cc.Color",
"r": 187,
"g": 187,
"b": 187
},
"_N$maxLength": 7
}
js中的代码
properties: {
editbox_Account: cc.EditBox
},
onLoad: function() {
//注册点击事件
this.editbox_Account.node.on("editing-did-began", this.EditingDidBegan, this),
this.editbox_Account.node.on("text-changed", this.EditingTextChanged, this),
this.editbox_Account.node.on("editing-did-ended", this.EditingDidEnded, this),
this.editbox_Account.node.on("editing-return", this.EditingDidReturn, this)
},
//点击输入框开始输入时调用
EditingDidBegan: function() {
console.log("EditingDidBegan：", this.editbox_Account.string);
},
//输入框中的文本发生改变时调用
EditingTextChanged: function() {
console.log("EditingTextChanged：", this.editbox_Account.string);
},
//点出editbox时调用
EditingDidEnded: function() {
console.log("EditingDidEnded：", this.editbox_Account.string);
},
//点击键盘Enter键时调用
EditingDidReturn: function() {
console.log("EditingDidEnded：", this.editbox_Account.string);
}