В приложении для чата Phonegap iOS текстовая область прыгает - PullRequest
Новая
       16

В приложении для чата Phonegap iOS текстовая область прыгает

0 голосов
/ 21 февраля 2019

Я пытаюсь создать приложение для чата / общения, например, в мессенджере, на телефоне, iOS, с html / css / js и PHP / AJAX на сервере.

Но мое веб-представление скачет истранный "черный блок появляется под моей текстовой областью при щелчке / фокусе, и текстовая область переходит наверх ...

(на Android все работает как шарм)

Структура очень проста:

Заголовок с: дисплей: блок; положение: относительный; поплавок: левый; ширина: 100%; высота: 15vh;

Блок сообщений с: дисплей: блок; положение: относительный;float: слева; ширина: 100%; высота: 65vh;

Текстовый блок / блок с: дисплей: блок; положение: относительный; float: слева; ширина: 100%; высота: 20vh;

И моя текстовая область (в текстовой области) с: display: block; позиция: относительная; float: left; ширина: 100%; высота: 100%; размер шрифта: 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), потому что я не хочу, чтобы мои пользователи прокручивали страницу (а просто прокручивали окно чата / чат-wrap).

...