本篇文章主要讲解使用 cocos creator 创建单行文本输入框及多行文本输入框，并绑定文本框获取文本输入数据的方法。

作者：任聪聪

日期：2023年2月2日

cocos引擎版本2.4.3

实际效果

单行文本效果、多行文本效果



说明：如果不清楚按钮如何绑定事件，可以看我前面写的这篇文章（

Cocos新手入门】cocos creator 的研发思路和工具操作说明

）里的1.5 绑定事件操作章节内容。

Editbox文本框的创建

单行文本创建

步骤一、使用组件控件创建文本说明



步骤二、设置属性及类型

多行文本创建

仅仅需要修改input mode中的参数为

ANY

即可。

文本框属性说明

string ：默认的输入框存在的值

placeholder ：提示信息，输入即消失

input mode： any为多行，其他都为单行

max length ： 最大输入字符数限制

文本框的监听和获取数据方式

1.监听状态说明

如下是一个文本框的四种监听状态类型，分为输入开始、输入改变、输入结束、输入返回

此处的绑定方式也可在我上方提到的文章内容中找到。

2.监听输入数据并赋值

说明：分别为四种形式的数据获取形式，通过一个函数来做演示，查看我们输入表单后对数据的获取效果。

代码片段：

	// v 值  e 事件对象  s 为customEventData的值
    getInput(v,e,s){
        console.log(v,e,s)
    }

监听效果，四种形式



故此：我们选择适合自己场景下的方式即可，这里我们选择的是changed 的状态类型

按钮绑定的函数获取数据的方式

1.获取已经赋值的数据

步骤一、先声明

说明：先在脚本代码中声明 所需的变量，如下：

    @property(cc.EditBox)
    title_input: cc.EditBox = null;

未声明的效果：看不到任何的对象

声明后的效果：我们会看到自己通过代码生成的对象



tips:这里我是把脚本绑定在canvas中的，所以才会显示，如果是绑定在其他的层级上，则是在绑定脚本的那个层级中查看。

步骤二、通过代码获取对象值

通过如下代码即可获取到相对应的数值

this.title_input.string;

实际代码片段：

    sumitBtn(e){
       let title =  this.title_input.string;
       let desc = this.desc_input.string;
        console.log('获取到的数据:',title,desc);
    }

实际效果，绑定按钮后，按按钮获取到的数值：



通过绑定的函数打印数值，效果如下：

注意：

如果出现报错“Uncaught TypeError: Cannot read properties of null (reading ‘string’)” 的情况，请记得点击canvas检查是否在creator中绑定对象

2.模拟网络请求提交表单

模拟网络请求，可以使用js原生的xhrhttp，也可以使用cocos的api，这里就不做详细的说名，方法有很多。

cocos的文档中的说明：

https://docs.cocos.com/cocos2d-x/manual/zh/advanced_topics/networking.html?h=post