uniapp点击输入框时键盘不上推页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp点击输入框时键盘不上推页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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"
/>

一，页面结构设计
先来看看聊天页面结构设计，外层布局如下：

<template>
    <view>
        <!-- 消息列表 -->
        <scroll-view class="msg-list" scroll-y="true">
        </scroll-view>
        
        <!-- 底部输入栏 -->
        <view class="input-box">
            <input :adjust-position="false"/>
        </view>
    </view>
</template>

之后底部这个输入栏，我们不要使用fixed定位，而是直接按照文档流排列，那如何让输入栏一直在最下面呢，这就是我们下一步操作啦。

注意：这里的input或者textarea需要设置一个:adjust-position="false"的属性，不然页面就会上推

二，定义消息列表高度
我们需要获取屏幕高度，然后使“消息列表”的高度为屏幕高度减去底部输入栏高度

<!-- ...... -->
    <!-- 消息列表 -->
    <scroll-view class="msg-list" scroll-y="true" :style={ height: msgListHeight }>
    </scroll-view>
<!-- ...... -->

onLoad() {
    // 獲取並設置屏幕高度
    uni.getSystemInfo({
        success: res => {
            this.screenHeight = res.windowHeight
            // 100为底部输入栏高度，单位rpx，需要先转成px
            this.msgListHeight = this.screenHeight - uni.upx2px(100)
        }
    })
}

三，监听键盘高度变化事件
下一步，需要监听键盘高度变化事件，并且动态设置消息列表高度

 
onReady() {
    // 监听键盘高度变化，以便设置输入框的高度
    uni.onKeyboardHeightChange(res => {
        let keyBoardHeight = res.height
        // 100为底部输入栏高度，单位rpx，需要先转成px
        this.msgListHeight = this.screenHeight - keyBoardHeight - uni.upx2px(100)
    })
},

四，优化
做到以上三步一般可以解决上面页面上推问题，剩下的就是不同项目不同的优化方案啦。

-------------------------------------------------------------------------

3、遇到问题
　　当我获取键盘高度定位时，发现底部定位的元素总是跟软键盘间隔一段距离。安卓和ios手机均是如此。就如这样：

4、问题原因
　　这是因为手机屏幕底部存在虚拟键位，虚拟键位是占了软键盘高度，占了屏幕高度，但是不占屏幕可使用窗口高度的

5、解决方案
　　知道了原因，其实问题就很好解决了。

　　uni.getSystemInfo(OBJECT)：获取系统信息。

　　我们可以通过该接口获取到系统信息里的：screenHeight（屏幕高度）、windowHeight（可使用窗口高度）

　　两者相减即为虚拟键位高度：keyHeight = screenHeight - windowHeight

　　然后获取到的软键盘高度减去虚拟键位高度即可得到定位的高度

setKeyHeight(obj) {
　　let _sysInfo = uni.getSystemInfoSync()
　　let _heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
　　let _diff = obj.height - _heightDiff
　　this.keyHeight = _diff > 0 ? _diff : 0

　　在iphone上有这样的问题，就是上面的obj.height在键盘隐藏时为0，这个时候就会出现负值，所以需要判断下
文章来源地址https://www.toymoban.com/news/detail-636580.html

到了这里，关于uniapp点击输入框时键盘不上推页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！