我正在开发一个 Vuejs 聊天应用程序，单击输入消息框时，如何在 android 中显示键盘时发送整个输入 div

Question

我正在用 vuejs 开发一个聊天应用程序，这是一个要在 Android 中打开的 webview。我有如下所示的 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

我的建议是在获得焦点时暂时将输入带到屏幕的最顶部。这可以通过添加一个标志来完成，我们可以通过该标志绑定动态 class。 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

我正在开发一个 Vuejs 聊天应用程序，单击输入消息框时，如何在 android 中显示键盘时发送整个输入 div

I am working on a Vuejs Chat app, on clicking the input message box, how do i sent the whole input div up along as keyboard shows up in android

javascript

chat

vue.js

vuejs2