uniapp输入法软键盘弹起，窗口顶起

完整代码

<template><view><view class="name"><view class="top">那些人可以提出入党申请</view><view class="time"><image src="../../static/home/time.svg" mode=""></image><text>2023-02-15 22:35:25</text></view></view><view class="recover"><view class="recover-text"><view>回复</view></view><view class="recover-content"><view class="recover-image"><image src="../../static/logo.png" mode=""></image></view><view class="recover-right"><view class="recover-top"><view>预备党员</view><view>2022-12-11 20:20</view></view><text>需符合以下条件：
1、年满18周岁以上的中国工人、农民、军人、知识分子和其他革命 分子；
2、承认党的纲领和章程；
3、愿意参加党的一个组织并在其中积极工作；
4、执行党的决议；
5、按期交纳党费。</text></view></view></view><view style="height: 140rpx;"></view><view class="but" :style="{bottom: inputBottom+'px'}"><input   @focus="focusTextarea"  @blur="blurTextarea" placeholder="请在此输入" :adjust-position="false"  v-model="value"><view>回复</view></view></view>
</template><script>export default {data() {return {value:"",inputBottom: 0,}},methods: {focusTextarea(e) {console.log(e.detail.height);this.inputBottom = e.detail.height;},blurTextarea(e) {this.inputBottom = 0;},gorecover(){uni.navigateTo({url:"/pageA/many1/recover"})}}}
</script><style lang="scss">.recover{padding: 20rpx;margin: 20rpx 0rpx;background-color: white;.recover-right{text{color: #666;font-size: 30rpx;line-height: 44rpx;}.recover-top{margin-bottom: 10rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: center;view:nth-child(1){font-size: 32rpx;font-weight: 500;color: black;}view:nth-child(2){font-size: 28rpx;color: #999;}}}.recover-content{margin-top: 20rpx;display: flex;flex-direction: row;.recover-image{width: 80rpx;height: 80rpx;margin-right: 20rpx;image{width: 80rpx;height: 80rpx;border-radius: 50%;}}}.recover-text{display: flex;flex-direction: row;justify-content: space-between;align-items: center;view:nth-child(1){font-size: 34rpx;font-weight: 600;}view:nth-child(2){color: #B70000;display: flex;align-items: center;font-size: 30rpx;}}}.but{position: fixed;bottom: 0rpx;left: 0rpx;right: 0rpx;background-color: white;padding: 20rpx;display: flex;flex-direction: row;input{border: 1px solid #B70000;border-radius: 50rpx;height: 70rpx;width: 77%;padding: 0rpx 20rpx;}view{width: 20%;margin-left: 3%;background-color: #C70B02;color: white;line-height: 70rpx;text-align: center;border-radius: 50rpx;}}.down{padding: 20rpx;text-align: center;color: #999;}.name{background-color: white;padding: 20rpx;margin: 20rpx 0rpx;.content{line-height: 50rpx;}.title{font-size: 32rpx;font-weight: 600;margin-top: 30rpx;}.time{display: flex;flex-direction: row;align-items: center;margin-top: 15rpx;text{font-size: 28rpx;color: #999;}image{width: 30rpx;height: 30rpx;margin-right: 10rpx;}}.top{font-size: 34rpx;font-weight: 600;}}
</style>

<input   @focus="focusTextarea"  @blur="blurTextarea" placeholder="请在此输入" :adjust-position="false"  v-model="value">

focus 为聚焦(键盘谈起),blur为失焦(键盘落下),just-position="false"为弹起键盘,页面不往上移动

focusTextarea(e) {console.log(e.detail.height);this.inputBottom = e.detail.height;},blurTextarea(e) {this.inputBottom = 0;},

inputBottom为input离底部的距离

uniapp输入法软键盘弹起，窗口顶起相关推荐

uni-app 解决软键盘弹起输入框遮盖问题
<textarea cursor-spacing="20" :focus="focus" auto-height="true" v-m ...
软键盘弹起，导致底部被顶上去
计算出可视界面的高度,当软键盘弹起时让底部元素隐藏掉, 当键盘收起时再让它显示,实在没办法时这种方法也不失为一种方法 1 var h=document.documentElement.clientHe ...
手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了, ...
安卓手机软键盘弹起的问题
现如今很多API对于安卓系统,iOS系统有些会兼容,有些不兼容.就拿软键盘弹起的问题来说吧,如果一个系统上面有一个输入框,底部有个按钮(前提按钮用了position:fixed),当我用安卓手机点击输 ...
android 输入法确定按钮,Android项目:输入法软键盘显示/隐藏的监听和控制,InputMethodManager用法研究...
在项目开发中,用到编辑框的地方经常涉及到要监听或者控制软键盘的显示/隐藏状态.本以为这是很容易解决的一个小问题,没想到当初碰到这个问题才明白还得花点小心思才能整好.现将针对软键盘的显示/隐藏状态的监听 ...
H5软键盘弹起收回（IOS与Android）
IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...
android 代码设置键盘适应_Android自适应软键盘的Dialog以及监听软键盘弹起
最近项目中遇到一个需求:新手引导.跟一般的新手引导没有什么太大区别,思路都是搞一个带阴影的遮罩层,然后在上边儿给一些提示性的文字,由于需求中有些特殊的地方,所以我用了一个全屏的dialog(而且,di ...
Explain：解决MUI 软键盘弹起挤压页面问题
问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...
h5 移动端监听软键盘弹起、收起
前面一篇博客 h5 安卓键盘弹起界面适配修改webview高度提到了在adnroid中如何监听软键盘的弹起与收起,是利用的窗口的高度发生变化 window.onresize事件来做突破点的,但是i ...

uniapp输入法软键盘弹起，窗口顶起

uniapp输入法软键盘弹起，窗口顶起相关推荐

最新文章

热门文章