在cocosCreator中，使用EditBox输入框插件的时候会遇到一些问题。EditBox控件其实就是在页面中添加了input标签，在canvas中添加了相对应的背景。
页面效果
EditBox控件
问题来了，在移动端，点击输入框会调起键盘，导致视口尺寸发生变化。如下：
之前的canvas的配置是适配设备的宽度和高度。
适配宽度和高度
调起手机软键盘，文本和文本框发生错位
点击输入框，调起软键盘，这时候视口尺寸发生了变化，由于我们的页面是高度适配的，所以它会随着视口的高度而等比缩放。这时候canvas的输入框会跟着缩放，而我们input的DOM元素定位发生了错误，所以导致文字错位。
如果宽高都不约束：
cocosCreator设置
移动端页面效果
我们看出，在不同设备，如果不做宽高约束的话，留白都会不一样，而且，输入框文字错位问题依然存在，这显然是不可以的。
解决方案1：
如果我们仅仅是宽度适配，就不会出现这样的问题（只约束一方按需设置）
约束宽度
约束宽度
上面的方法好像都不是太好理解，如果太想理解为啥，就移步到官网论坛吧，那里是一个学习cocosCreat的好地方：
Cocos论坛
万能方案：
思路：既然cocorCreat把输入和输入框分成了两件事情来做（一个是input标签，一个是canvas内的元素），那不如就让input只做输入的事情，添加label在canvas内做显示。
添加lable
我们拖拽了一个label控件进来，并且让他成为EditBox控件的子节点。结构如下：
添加label控件
下一步开始在静态资源添加一个js，内容直接复制吧：
cc.Class({
extends: cc.Component,
properties: {
},
/*--------------这里是主要代码------------*/
onTextChanged: function(text, editbox, customEventData) {
//这里的 text 表示 修改完后的 EditBox 的文本内容
//这里 editbox 是一个 cc.EditBox 对象
//这里的 customEventData 参数就等于你之前设置的 "foobar"
console.log(text);
//使用代码找到我们添加的label控件，并将文字及时的赋值给label
var lableS = this.node.getChildByName('label')
lableS.getComponent(cc.Label).string = text;
},
});
绑定组件：下一步，到cocos节点中，EditBox添加用户组件，我的js叫做shuru.js所以：
绑定用户组件
绑定事件：EditBox控件的TextChange事件数值为1，将edibox节点拖拽到cc.Node里面，后面两个下拉框会出现我们的用户组件，以及用户组件中的方法：
绑定事件
这样，输入文字的时候，会同步到label的样式里面。这时候input标签，和canvas里面的label同时存在，但是达到了我们想要的效果。
input和label同存
细节调整：我们需要将input的透明度设置为0，这样用户就看不到了
其次，我们会发现label随着文字增多，一直是居中的，左边超出了输入框，这时候我们需要修改label定位，X方向从0.5改为0，对齐方式选择左对齐：
方法优点：
1、无论什么方式适配，和父组件对齐就OK。
2、解决对齐问题
缺点：光标丢失
可能随着cocos的更新，以后不需要这么麻烦的操作了，但是此方法依然可以用于cocos中用户输入的特殊需求。
网友评论