技术分享：横屏输入框的解决方案

###正文

我们首先来体验一下Creator在横屏游戏中Editbox的效果

1. 新建一个HelloWorld工程, 并拖动一个EditBox到场景中

2. 试试将项目发布成横屏
   

   

   image.png920×140 16.7 KB

3. 真机上预览的效果, 分别是 正常和 弹出键盘的效果
   

   

   image.png750×1334 1.05 MB
          
   

   image.png750×1334 592 KB
   
    
    

`这个效果我自己接受不了， 用户更不能接受了。

1. 首先屏幕被横过来了
2. 显示不全
3. 影响用户体验，有横竖屏切换的过程`

###解决方案
下图是我为了解决这个问题想到的方法 条件 ：横屏游戏 + 竖屏操作 优点 ：不用旋转屏幕 + 更人性化(PS:个人认为) 缺点 ：用户操作手势会切换

image.png750×1334 358 KB

###步骤

1. 这个弹窗我引用了第三方插件， 下载地址：PostbirdAlertBox

2. 修改引擎源码, 找到engine目录下,搜索CCEditBox.js

3. 修改如下两个方法：

_onTouchBegan: function(event) {

var post = PostbirdAlertBox
if (cc.view._isRotated && cc.sys.isMobile) {
var func = (data) = >{
if (!cc.isValid(this) || !cc.isValid(this.node)) {
return;
}
this.node.getComponent(cc.EditBox).string = data;
}
if (post) {
post.prompt({
‘value’: null,
‘title’: ‘请输入内容’,
‘okBtn’: ‘确认’,
onConfirm: (data) = >{ func(data) },
onCancel: () = >{}
})
}
event.stopPropagation();
return;
}
if (this._sgNode) {
this._sgNode._onTouchBegan(event.touch);
}
event.stopPropagation();
},

_onTouchEnded: function(event) {

if (cc.view._isRotated) {

  return;

}
if (this._sgNode) {
this._sgNode._onTouchEnded();
}
event.stopPropagation();
},

这样就大工告成了！！

注：

• 修改引擎脚本后，需重新编译引擎哦。
• 插件相应的css文件也要引用哦。

这个是H5用的吗？原生平台不知是否可以？

对，适用于H5的

謝謝分享

谢谢分享

谢谢分享

有没有办法做到屏幕不旋转，输入法保留就好，不另外去做那个编辑框

我也遇到了同样的问题，不知道你是如何解决的？

其实完全没必要用第三方的，自己写个组件就好了，我分享出来吧。
createEditTextView: function (placeholder, callback, value, isNum) {
if (!cc.sys.isBrowser) return;
var editDiv = document.getElementById(“EditDiv”);
if (!editDiv) {
editDiv = document.createElement(“DIV”);
editDiv.setAttribute(“id”, “EditDiv”);
editDiv.style = “width:100%;height:120px;line-height:60px;position: fixed;top:0;z-index:100000;background:white;”;
document.body.appendChild(editDiv);
}
var editText = document.getElementById(“EditText”);
if(!editText){
editText = document.createElement(“INPUT”);
editText.setAttribute(“id”, “EditText”);
editText.setAttribute(“name”, “EditText”);
editText.style = “width:100%;height:60px;line-height:60px;font-size:20px;”;
editDiv.appendChild(editText);
}
var editBtn = document.getElementById(“EditBtn”);
if (!editBtn) {
editBtn = document.createElement(“A”);
editBtn.innerHTML = “完成”;
editBtn.href = “javascript:void(0);”;
editBtn.setAttribute(“id”, “EditBtn”);
editBtn.setAttribute(“name”, “EditBtn”);
editBtn.style = “width:120px;height:60px;line-height:60px;font-size:20px;padding:20px;”;
editDiv.appendChild(editBtn);
}
cc.userGame.myEasy.isInputing = true;
editDiv.style.display = “block”;
editText.type = isNum ? “NUMBER” : “TEXT”;
editText.placeholder = placeholder ? placeholder : “请输入您要填写的内容”;
editText.value = value ? value : “”;
editText.focus();
editText.oninput = function(event){
var editText = event.target.value;
if(callback){
callback(editText);
}
}
editBtn.onclick = function (event){
editDiv.style.display = “NONE”;
editText.value = “”;
document.activeElement.blur();
setTimeout(function(){
cc.userGame.myEasy.isInputing = false;
}, 300);
}
},

H5上其实这样就可以解决横竖屏
if (!cc.sys.isNative) {
cc.view.setResizeCallback(function() {
if(document.body.scrollWidth>document.body.scrollHeight){
cc.view.setOrientation(cc.macro.ORIENTATION_LANDSCAPE);
}else{
cc.view.setOrientation(cc.macro.ORIENTATION_PORTRAIT);
}
},this);
}

mark一下

Mark

你这个组件怎么用能否告知一下？？？

Mark

鸡儿用没得，就装下逼

thank you

自己写歌键盘 想怎么样就怎么样 就是不能用拼音而已

这个怎么用的呢