EditBox控件在真机浏览器输入数据时屏幕会自动旋转90度

Creator 2.x
#1

在项目中使用了editbox控件，实测小米5手机，手机自带 UC浏览器，输入数据时点击输入框，屏幕会自动旋转90度，游戏由竖屏转为横屏，点击空白区域关闭键盘，屏幕不会转回来，退出当前场景再次进入，再点击输入框就没有问题了。不知道有没有遇到相同问题的大牛？想知道大家是怎么解决的？

2赞
#2

补充一下：第一次点击输入时，屏幕从竖屏转向横屏，关闭键盘屏幕依旧是横屏；再次点击输入框屏幕又从横屏转回了竖屏，关闭键盘也不会旋转，之后多次点击输入框都是竖屏，是没有问题的。（我这个界面放了两个输入框，点击另外一个输入框不会影响该问题的异常）

#3

h5方案不能直接用官方自带，很low。
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);
}
},

2赞
#4

@Knox

#5

@Knox 求助求助啊

#6

@panda 求助啊

#7

真没人能解决这个底层的BUG吗？ @panda @Knox

#8

我不是给你解决方案了吗

#9

嗯嗯，非常感谢您的回复，主要我是在想，如果要跨平台，这个地方我就得弄两个控件，这样做起来并不是很理想。而且这确实是creator自身的问题，官方确实需要解决这样的BUG

#10

判断下平台就好了

#11

其实不算bug，系统问题，其他引擎也是这样的，只是在h5平台要变通下实现方式

#12

嗯，就目前看这样做是最好的解决方案了，感谢大牛指导。

#13

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

#14

1.-----------------------------------------
CocosCreator\resources\engine\cocos2d\core\platform\CCView.js

找到

_initFrameSize: function () {...}

找到

    ...else {
                locFrameSize.width = h;
                locFrameSize.height = w;
                cc.container.style["-webkit-transform"] = "rotate(90deg)";
                cc.container.style.transform = "rotate(90deg)";
                cc.container.style["-webkit-transform-origin"] = "0px 0px 0px";
                cc.container.style.transformOrigin = "0px 0px 0px";
                this._isRotated = true;
        }


修改成
此处修改要根据很竖屏，我的是竖屏，所以以竖屏举例子
/*
   1. cc.sys.isMobile
   2. 判断横竖屏
      如果是竖屏
            那么不管什么状态下都不要转动屏幕
     如果横屏
           在输入状态下不转
           否则转屏

    isInput 自己定义一个全局变量（是否是输入状态）
*/

...else{
    if(cc.sys.isMobile && ((window.orientation  === 180 || window.orientation === 0) || isInput)) {
                // 不转屏
                locFrameSize.width = w;
                locFrameSize.height = h;
                cc.container.style["-webkit-transform"] = "rotate(0deg)";
                cc.container.style.transform = "rotate(0deg)";
                this._isRotated = false;
   }else {
                // 转屏
            locFrameSize.width = h;
            locFrameSize.height = w;
            cc.container.style["-webkit-transform"] = "rotate(90deg)";
            cc.container.style.transform = "rotate(90deg)";
            cc.container.style["-webkit-transform-origin"] = "0px 0px 0px";
            cc.container.style.transformOrigin = "0px 0px 0px";
            this._isRotated = true;
   }

}

2.------------------------------------------
CocosCreator\resources\engine\cocos2d/core/editbox/CCSGEditBox.js

找到 有两处
tmpEdTxt.addEventListener('focus', function() {
      isInput = true;    // 添加这个
      ....
})

找到 有两处
tmpEdTxt.addEventListener('blur', function () {
      isInput = false;    // 添加这个
      ....
})

重新编译一下引擎，这样就ok了，编译引擎看官方教程

#15

2.4.4版本，又死灰复燃了。代码都重构了 :rofl: