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

2020-05-30 00:45
椰子皮
14156
10
8
移动端

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

试了好几种方法,最后只能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"
/>
赏
支付宝微信
8
关注公众号获取更多内容
element-ui使用axios进行全局控制loading
uniapp或小程序利用canvas生成圆图
共有 7 条评论
发表评论
  • zzc#10191
    1周前
    未知
    Mozilla/5.0 (Windows NT 10.0;
    Chrome

    真的是帆帆帆帆

    回复
  • Javascript#10086
    2022-07-11 20:26
    未知
    Win10

    h5上推页面用这个方法解决不了

    回复
  • undefined#10079
    2022-02-21 19:19
    上海市上海市虹口区
    Win10

    h5也不支持keyboardheightchange

    回复
  • 歌尽花颜#10073
    2021-02-24 19:13
    吉林省长春市
    Win10

    怎么加在根元素上呀?.prevent不是只支持H5的吗?

    回复
    • 椰子皮#10147
      2021-03-02 01:25
      吉林省长春市
      Win10

      加在templete里面的第一个元素上面

      回复
  • Alanlee#10068
    2020-07-15 02:46
    广东省深圳市福田区
    Win7

    这个项目没有v3编译版本,我的是app的android机型测出来不行

    回复
  • Alanlee#10067
    2020-07-15 01:00
    广东省深圳市福田区
    Win7

    还是不行,是不是要用@keyboardheightchange,onKeyBoardHeightChange"这个属性方法?但是我看文档这个@keyboardheightchange方法好像支持小程序,我的是app(ios以及android端的)

    回复
    • 椰子皮#10146
      2020-07-15 02:39
      广东省深圳市福田区
      Win7

      我的是也是app,现在都没什么问题,是不是编译版本不对?v3?

      回复
  • Alanlee#10066
    2020-07-15 00:26
    广东省深圳市福田区
    Win7

    你好,我想问下我在onLoad函数用了uni,onKeyboardHeightChange方法,在hbuilder调试是可以的,但是打包成app之后完全没有监听到,请教一下是为什么?

    回复
    • 椰子皮#10145
      2020-07-15 00:31
      广东省深圳市福田区
      Win7

      应该不会吧,hbuilder是不是最新的,放在onReady试试

      回复
共 7 条 第 1-7 条
每页
10
条
  • 1
不支持canvas