uniapp点击输入框时键盘不上推页面-椰子皮

uniapp点击输入框时键盘不上推页面

 2020-05-29

 椰子皮

 0

 467

“ 一些输入框固定在页面底部，我们希望键盘弹出的时候，页面不动，输入框挨着键盘，解决键盘弹出遮挡输入框的问题 ”

试了好几种方法，最后只能adjust-position设置为false，然后监听键盘的高度赋值给输入框bottom

这里还一个非常重要的地方，在根元素设置@touchmove.stop.prevent，这样在ios上页面就不会滚动，不影响其他组件内部滚动

onReady() {
  // 监听键盘高度变化，以便设置输入框的高度
  uni.onKeyboardHeightChange(res => {
    this.inputOffsetBottom = res.height
    if (res.height === 0) {
      this.focus = false
    }
  })
},

<input
  v-model="commentValue"
  :style="{bottom: inputOffsetBottom > 0 ? inputOffsetBottom + 'px' : '0'}"
  :disabled="setDisabled"
  :adjust-position="false"
  :cursor-spacing="20"
  :placeholder="placeholderText"
  type="text"
  class="lp-comment-input"
  confirm-type="send"
  @focus="onInputFocus"
  @blur="onInputBlur"
  @confirm="onInputEnter"
  @keyboardheightchange="onKeyBoardHeightChange"
/>



支付宝微信

 0