Я работаю над приложением Vuejs Chat, нажимая на окно входного сообщения, как мне отправить весь ввод вместе с клавиатурой, отображаемой в android

Question

Я работаю над приложением чата в vuejs, это веб-представление, которое открывается в Android. У меня есть input-bx, как показано ниже для отправки сообщения, как мне перетащить input-bx, чтобы оно скрывалось, когда появляется клавиатура android.

<div class="enter_msg child2" style="flex:1;  bottom: 0;" >
      <input class="input-bx msgara" placeholder="Tap here to start typing..." v-model="groupMsg" />
      <v-btn id="grpmsg" class="send_btn" :disabled="isDisable(groupMsg)" @click="sendGroupMsg()"> <p style="margin:0">Send</p></v-btn>
    </div>




.enter_msg{
  display: flex;
  flex: 3;
  position: fixed;
  width: 72%;
  padding: 2% 4%;
}


.input-bx {
  border: 1px solid #111;
}


.msgara{
background-color: #260b1c;
border: 1px solid #b92876;
border-radius: 2px;
width: 80%;
padding: 2%;
height: 38px;
}

Answer 1

Мое предложение состоит в том, чтобы временно перенести ввод в самую верхнюю часть экрана, пока он находится в фокусе. Это можно сделать, добавив флаг, с помощью которого мы можем связать класс Dynami c. html:

<div class="enter_msg child2" style="flex:1;  bottom: 0;" >
  <input class="input-bx msgara" v-bind:class="{ inputBoxUp: flag }" placeholder="Tap here to start typing..." v-model="groupMsg" @focus="flag=true" @blur="flag=false"/>
  <v-btn id="grpmsg" class="send_btn"  :disabled="isDisable(groupMsg)" @click="sendGroupMsg()" > <p style="margin:0">Send</p></v-btn>
</div>

css:

.inputBoxUp { position: fixed; top: 5px; }

Также просто добавьте флаг в данные компонента, очевидно.

Пример

Вот кодекс с рабочим примером https://codepen.io/drewct/pen/qBdwmeM