我正在尝试在phonegap,iOS上创建一个与Messenger聊天/通讯的应用,并在服务器上使用html / css / js和PHP / AJAX。
但是我的Web视图正在跳跃,单击/焦点时,我的文本区域下方出现一个奇怪的“黑色块,文本区域跳至顶部...
(一切在Android上都像魅惑一样工作)
结构非常简单:
标题: 显示:块;位置:相对;向左飘浮;宽度:100%;高度:15vh;
消息块: 显示:块;位置:相对;向左飘浮;宽度:100%;高度:65vh;
Textarea div / block具有: 显示:块;位置:相对;向左飘浮;宽度:100%;高度:20vh;
和我的textarea(在textarea div中): 显示:块;位置:相对;向左飘浮;宽度:100%;高度:100%; font-size:1.0em;
我已经尝试过index.js了:
Keyboard.shrinkView(true);
Keyboard.automaticScrollToTopOnHiding = false;
在我的config.xml中:
<preference name="webviewbounce" value="false" />
<preference name="Webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="HideKeyboardFormAccessoryBar" value="false" />
<preference name="DisallowOverscroll" value="true" />
我也尝试过此操作(重点,然后单击):
$('textarea').on('focus', function(e) {
e.preventDefault();
e.stopPropagation();
setTimeout(
function(){
windows.scrollTo(0, 0);
}, 100);
});
自3个星期以来,我一直在处理此错误,我不知道该怎么办...
谢谢。
如果需要,这是我的结构CSS(#container是主包装,在其中放入#main,所有内容/页面均装入#main中):
html, body {
width:100%;
height:100%;
background:none;
overflow:none;
color:white;
font-size:0;
padding:0;
margin:0
}
* { font-family:"Montserrat" }
body { -webkit-overflow-scrolling:touch }
header, nav, footer, figure, section, article, figcaption, aside { display:block }
#container {
float:left;
display:block;
position:relative;
width:100%;
min-height:100vh;
overflow:none;
-webkit-overflow-scrolling:touch;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
behavior:url(./UX/boxsizing.htc);
background-color:black;
background:none;
font-size:14px;
left:0;
right:0;
margin:0;
padding:0
}
#main {
float:left;
display:table;
position:relative;
width:100%;
height:100%;
min-height:100vh;
overflow:none;
background-color:black;
font-size:14px;
margin:0;
padding:0
}
所有输入,textarea都在所有其他页面上工作,我认为我的聊天错误仅是因为该页面的高度为块状(最大100vh),因为我不想让我的用户滚动页面(而只是滚动聊天框/聊天包装)。