在Phonegap iOS聊天应用程序中,文本区域正在跳跃

时间:2019-02-21 13:53:59

标签: ios webview textarea chat phonegap

我正在尝试在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个星期以来,我一直在处理此错误,我不知道该怎么办...

谢谢。

Me, trying to click on textarea

如果需要,这是我的结构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),因为我不想让我的用户滚动页面(而只是滚动聊天框/聊天包装)。

0 个答案:

没有答案