项目场景：uniapp多个输入框弹出软键盘后无法滚动到底部

已于 2022-05-01 22:41:53 修改
阅读量2.2k 收藏 3
点赞数 2
分类专栏： 乱七八糟 文章标签： javascript webview 前端
于 2022-05-01 20:40:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mtl1994/article/details/124532168
版权

项目场景：uniapp多个输入框弹出软键盘后无法滚动到底部|遮挡底部input

在做uniapp 的时候遇到多个输入框的情况，用官方demo做个演示

adjustPan 模式

问题描述

uniapp 多个输入框 无法拉到最下面
在这里插入图片描述
在这里插入图片描述

原因分析：

1.adjustPan 模式下 软键盘弹出时，webview窗体高度不变，但窗体上推，以保证输入框不被软键盘盖住，此时软键盘会覆盖后面的输入框导致无法展示全部

​ 通过 onKeyboardHeightChange 监听键盘弹出设置外边距为软键盘弹出的高度解决了此问题

2.但是这样会导致鼠标点击上方的时候显示正常，鼠标点击下方的时候 会超出一部分

​ a.通过设置 adjust-position 可以解决这个问题，但是效果不太好

​ b.应该是软键盘自动推起输入框的时候 默认加了一个边距，所以需要动态设置 下边距 减去默认推起的高度
在这里插入图片描述

解决方案：

最外层 view 设置 下边距 并增加一个点击方法

<view class="nvue-page-root" :style="'padding-bottom:' + dom_height + 'px;'"  @click="input_click" id="body">

获取页面高度

onReady() {
    var _this = this;
    this.window_height = uni.getSystemInfoSync().windowHeight;
    const query = uni.createSelectorQuery().in(this);
    query.select('#body').boundingClientRect(data => {
        console.log("得到布局位置信息" + JSON.stringify(data));
        _this.height = data.height
        console.log("节点离页面顶部的距离为" + data.top);
    }).exec();
},

点击方法

input_click(e){
    var _this = this;
    uni.onKeyboardHeightChange(res => {
        let h = res.height
        if(h > 0){
            let h2 = e.target.y - (_this.window_height - h)
            if(h2 > 0){
                h -= h2
            }
        }
        _this.$set(_this, 'dom_height', h);
    })
},

完整代码

<template>
    <view class="nvue-page-root" :style="'padding-bottom:' + dom_height + 'px;'"  @click="input_click" id="body">
        <view class="page-title">
            <view class="page-title__wrapper">
                <text class="page-title__text">{{title}}</text>
            </view>
        </view>
        <view class="uni-common-mt">
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">可自动聚焦的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder="自动获得焦点" @click="input_click"/>
                </view>
            </view>
            <!-- #ifdef APP-PLUS -->
            <view v-if="platform==='ios'&&!isNvue" class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">隐藏 iOS 软键盘上的导航条</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder="触摸其他地方收起键盘" @focus="onFocus" @blur="onBlur" @click="input_click"/>
                </view>
            </view>
            <!-- #endif -->
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为搜索</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" @click="input_click"/>
                </view>
            </view>
            <!-- #ifndef H5 -->
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">键盘右下角按钮显示为发送</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" confirm-type="send" placeholder="键盘右下角按钮显示为发送" @click="input_click"/>
                </view>
            </view>
            <!-- #endif -->
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">控制最大输入长度的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" maxlength="10" placeholder="最大输入长度为10" @click="input_click"/>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">实时获取输入值：{{inputValue}}</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" @click="input_click"/>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">控制输入的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" :adjust-position="false" />
                </view>
            </view>
            <!-- #ifndef MP-BAIDU -->
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">控制键盘的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" :adjust-position="false"/>
                </view>
            </view>
            <!-- #endif -->
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">数字输入的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" type="number" placeholder="这是一个数字输入框"/>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">密码输入的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" password type="text" placeholder="这是一个密码输入框" @click="input_click"/>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">带小数点的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" type="digit" placeholder="带小数点的数字键盘" @click="input_click"/> </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">身份证输入的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" type="idcard" placeholder="身份证输入键盘" @click="input_click"/> </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">控制占位符颜色的 input</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder-style="color:#F76260" placeholder="占位符字体是红色的" @click="input_click"/>
                </view>
            </view>
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">带清除按钮的输入框</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" @click="input_click"/>
                    <text class="uni-icon" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
                </view>
            </view> 
            <view class="uni-form-item uni-column">
                <view class="title"><text class="uni-form-item__title">可查看密码的输入框</text></view>
                <view class="uni-input-wrapper">
                    <input class="uni-input" placeholder="请输入密码" :password="showPassword" @click="input_click"/>
                    <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'input',
                focus: false,
                inputValue: '',
                showClearIcon: false,
                inputClearValue: '',
                changeValue: '',
                showPassword: true,
                src: '../../../static/eye-1.png',
                platform: '',
                isNvue: false,
				dom_height: 0,
				height: 0,
				window_height: 0,
            }
        },
		watch: {
			dom_height(val, oldval){
				console.log(val, oldval)
			}
		},
		onReady() {
			var _this = this;
			this.window_height = uni.getSystemInfoSync().windowHeight;
			const query = uni.createSelectorQuery().in(this);
			query.select('#body').boundingClientRect(data => {
			  console.log("得到布局位置信息" + JSON.stringify(data));
			  _this.height = data.height
			  console.log("节点离页面顶部的距离为" + data.top);
			}).exec();
		},
        methods: {
			input_click(e){
				var _this = this;
				
				uni.onKeyboardHeightChange(res => {
					let h = res.height
					if(h > 0){
						let h2 = e.target.y - (_this.window_height - h)
						if(h2 > 0){
							h -= h2
						}
					}
					_this.$set(_this, 'dom_height', h);
				})
			},
            onKeyInput: function(event) {
                this.inputValue = event.detail.value
            },
            replaceInput: function(event) {
                var value = event.detail.value;
                if (value === '11') {
                    this.changeValue = '2';
                }
            },
            hideKeyboard: function(event) {
                if (event.detail.value === '123') {
                    uni.hideKeyboard();
                }
            },
            clearInput: function(event) {
                this.inputClearValue = event.detail.value;
                if (event.detail.value.length > 0) {
                    this.showClearIcon = true;
                } else {
                    this.showClearIcon = false;
                }
            },
            clearIcon: function() {
                this.inputClearValue = '';
                this.showClearIcon = false;
            },
            changePassword: function() {
                this.showPassword = !this.showPassword;
            },
            onFocus() {
                this.$mp.page.$getAppWebview().setStyle({
                    softinputNavBar: 'none'
                })
            },
            onBlur() {
                this.$mp.page.$getAppWebview().setStyle({
                    softinputNavBar: 'auto'
                })
            }
        },
        onLoad() {
            this.platform = uni.getSystemInfoSync().platform
            // #ifdef APP-PLUS-NVUE
            this.isNvue = true
            // #endif
        }
    }
</script>

<style scoped>
    .nvue-page-root {
        background-color: #F8F8F8;
        padding-bottom: 20px;
    }

    .page-title {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 35rpx;
    }

    .page-title__wrapper {
        padding: 0px 20px;
        border-bottom-color: #D8D8D8;
        border-bottom-width: 1px;
    }

    .page-title__text {
        font-size: 16px;
        height: 48px;
        line-height: 48px;
        color: #BEBEBE;
    }

    .title {
        padding: 5px 13px;
    }

    .uni-form-item__title {
        font-size: 16px;
        line-height: 24px;
    }

    .uni-input-wrapper {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        padding: 8px 13px;
        flex-direction: row;
        flex-wrap: nowrap;
        background-color: #FFFFFF;
    }

    .uni-input {
        height: 28px;
        line-height: 28px;
        font-size: 15px;
        padding: 0px;
        flex: 1;
        background-color: #FFFFFF;
    }

    .uni-icon {
        font-family: uniicons;
        font-size: 24px;
        font-weight: normal;
        font-style: normal;
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #999999;
    }

    .uni-eye-active {
        color: #007AFF;
    }
</style>


        background-color: #FFFFFF;
    }

    .uni-icon {
        font-family: uniicons;
        font-size: 24px;
        font-weight: normal;
        font-style: normal;
        width: 24px;
        height: 24px;
        line-height: 24px;
        color: #999999;
    }

    .uni-eye-active {
        color: #007AFF;
    }
</style>
matianlongg
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
解决uni-app 输入框，键盘弹起时页面整体上移问题
weixin_42125732的博客
10-19 2万+
1.发现将adjust-position属性设置为false。就可以了。前提是vue 页面 softinputMode不能是为 adjustResize 2.这个softinputMode属性在page.json文件中，找到需要修改的页面配置，在app-plus中找到softinputMode属性，uniapp中默认属性值是adjustPan， 在pages.json里该页面注册的style里加上这段代码就能完美解决了 "style": { //手机软键盘升起不让其将页面头部上推 "app-
聊天uniapp 微信小程序以及安卓app键盘弹出会把底部fixed定位的textarea输入框覆盖掉的解决方法
qq_38407674的博客
02-13 1839
虽然加了100vh后，但是聊天窗口底部还是会被遮挡，这怎么办那？办法就是：把内框view设置成95vh，小于100vh就行。将pages.json文件在指定的页面中加入以下配置 “softinputMode”: “adjustResize”2.设置最外层页面高度应为 100vh。1.设置pages.json文件。的高度设置为100vh。
uniapp小程序项目解决键盘问题
最新发布
m0_61368323的博客
07-17 790
步骤：1. 使用adjust-position属性，禁止页面上移；2. 但此时如果输入框在底部，当点击输入时，键盘会弹起，这时候需要动态移动输入框的位置，使输入框位于键盘的上面，所以页需要获取键盘的高度。知识点：1. input有一个adjust-position属性，控制当键盘弹起时，是否自动上推页面。
uni-app 添加prompt组件--能输入文本的提示框
热门推荐
anlixi的博客
12-30 1万+
uni-app全平台编译理念还是很不错的，可惜还在采坑中… 苦于uni-app官方样例不多，easyui的$.messager.prompt又用得太方便了，uni-app正好缺一个prompt组件。 到网上找到一个给微信小程序写的界面copy过来修改一下使用。 原文链接:https://blog.csdn.net/zhy13087344578/article/details/80648048 首先...
解决uni-app微信小程序底部输入框，键盘弹起时页面整体上移问题
Qianmoer的博客
07-04 4302
存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur 时恢复 bottom=0； 使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入框
uniapp中uview组件库的Input 输入框 的使用方法
精通前端技术，了解后端接口
01-02 1万+
去除fixedautosize字段此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。应该在u-form中嵌套，再嵌套u-input去实现。注意：由于在nvue下，u-input名称被uni-app官方占用，在nvue页面中请使用u--input名称，在vue页面中使用u--input或者u-input均可。
解决Android软键盘弹出覆盖h5页面输入框问题
08-27
在本例中，Flex布局使输入框位于可视区底部，使得软键盘弹出时无法上移到可视区内。 知识点三：解决软键盘弹出覆盖输入框问题的方法 解决软键盘弹出覆盖输入框问题有多种方法，以下是一些常见的解决方法： 1. ...
jQuery点击输入框弹出软键盘输密码特效
06-10
**jQuery点击输入框弹出软键盘输密码特效详解** ...为了提高用户体验，许多开发者选择使用自定义软键盘来...在实际项目中，还可以根据需求进行定制，如增加自定义键盘布局、支持多语言输入等功能，以满足不同场景的应用。
Android 弹出软键盘所遇到的坑及解决方法
08-31
在Android应用开发中，弹出软键盘是一个常见的操作，但同时也可能会遇到一些问题。这篇内容主要探讨了在Android中弹出软键盘时可能遇到的困难，并提供了相应的解决方案。以下是一些关键知识点： 1. **布局调整**：...
iOS项目开发键盘弹出遮挡输入框问题解决方案
01-05
UITextField和UITextView，前者是单行输入文本框，后者是可滑动的多行输入文本框，在这整个开发过程中，我们需要控制键盘的弹出和收起、在输入结束的时候获取输入的信息，此外，我们还需要保证在键盘弹起的时候不...
android软键盘弹出黑屏
QY_program的博客
11-27 1770
最近遇到一个EditText弹出软键盘背景黑屏的问题 ，而且有的页面出现，有的不出现。 有网友记录这样可以解决： //根布局 LinearLayout llRoot=findviewByid(R.id.llRoot); //设置背景为白色 llRoot.getRootView.setBackgroudColor(this.getResouces().getColor(...
ios 微信 键盘弹起 底部空白
谁说学美术将来只能卖画了，我也有自己的梦想。
07-14 473
/* iOS12以上版本，微信打开链接点击输入框获取焦点后虚拟键盘自动弹出 收起键盘，原来弹出键盘的位置一片空白，页面没有自动适应整个屏幕 解决办法： 在当前页面滚动的位置上下滚动1px的距离即可实现页面的自适应 */ document.body.addEventListener(‘focusout’, () => { //软键盘收起的事件处理 let ua = window.navigator.userAgent; let app = window.navigator.appVersion; /.
uniapp打包嵌入app，输入框被键盘遮挡的问题
m0_50290552的博客
11-06 1026
uniapp打包嵌入app，输入框被键盘遮挡的问题
uniapp实现带输入框的弹出框
m0_58135258的博客
07-04 1万+
uniapp实现带输入框的弹出框
uniapp 输入对话框 漂亮进阶
明耀的博客
09-03 3958
<template> <uni-popup ref="customModal" type="center"> <view class="model-wraper"> <view class="modal-title" v-if="modalTitle !== ''"> {{modalTitle}} </view> <view class="modal-body"> <input v-mod.
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 6052
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
转-解决uni-app输入框被键盘挡住问题
博客
03-21 9028
存在问题 做了一个记录页面（类似单方聊天页），输入框在底部；当弹出键盘时，页面整体上移，页面头信息会消失不见 需要实现效果： 比如一个记录页面，需要在键盘弹出时： 底部的输入框跟随键盘上弹 页面头固定在顶部不动 聊天信息区域（即内容区）调整高度，该区域局部滚动 解决方法 底部输入框fixed定位在底部，使用输入框的@focus获取键盘高度，更改输入框bottom；@blur时恢复bottom=0； 使用包含页面头和内容区 container的padding-bottom设置为输入框高度+输入
uniapp-小程序上下滚动失效解决办法
艺术就是爆炸!
04-20 2091
uniapp-小程序上下滚动失效解决办法
uniapp项目隐藏键盘，但留下空白，如何隐藏键盘
qq_45530512的博客
11-22 811
uniapp项目隐藏键盘，但留下空白，如何隐藏键盘
uniapp 键盘弹出页面上移
07-28
你可以通过监听键盘的弹出和收起事件来实现页面上移的效果。在uni-app中，可以使用uni-app提供的`onKeyboardHeightChange`事件和`uni.pageScrollTo`方法来实现。 首先，在你的页面的`onLoad`生命周期函数中添加以下代码： ```javascript onLoad() { uni.onKeyboardHeightChange((res) => { const keyboardHeight = res.height; uni.pageScrollTo({ scrollTop: keyboardHeight, duration: 300 }); }); } ``` 这段代码会监听键盘高度变化的事件，并在键盘弹出时通过`uni.pageScrollTo`方法将页面滚动到键盘的位置。 然后，在你的页面的`onUnload`生命周期函数中添加以下代码： ```javascript onUnload() { uni.offKeyboardHeightChange(); } ``` 这段代码会在页面卸载时取消监听键盘高度变化的事件，避免内存泄漏。 这样，当键盘弹出时，页面就会自动向上滚动，以适应键盘的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

matianlongg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值