uniapp 微信小程序表单input输入框，点击下面的输入框时输入法弹出会把输入框内容顶上去

最新推荐文章于 2024-07-17 17:00:29 发布
最新推荐文章于 2024-07-17 17:00:29 发布
阅读量2.1k 收藏 5
点赞数 8
文章标签： uni-app css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45067263/article/details/127303397
版权

项目场景：

在这里插入图片描述

在这里插入图片描述

原因分析：

当前页面设置了高度，以及滚动轴，输入法弹出时并没有把页面内容往上定，只顶了输入框内容
在这里插入图片描述

解决方案：

在这里插入图片描述
不要设置死高度，内容自适应，输入法弹出时让他自己往上顶整个页面，整个内容往上走
在这里插入图片描述
这样就正常了

野猪佩奇007
关注
  • 8
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
解决微信小程序长页面滚动到底部点击底部的输入框后输入框漂浮且页面滚动到顶部
仰望星空的代码
07-03 2663
一、问题描述 项目中有一个长页面上部展示部分信息下部为信息录入，页面长度为三屏幕（不同手机屏幕大小略有差异），当滚动到第二屏或者第三屏去填写信息时点击输入框后输入框漂浮起来了并且页面向上滚动了一段距离，回到了第一屏中展示的内容。效果如图。 滚动到第二屏，证件号输入。 点击输入框 可以看到证件号输入框漂浮了起来并且页面滚动到了第一屏展示的内容。 注意：小程序是2018年上线，在2020年4月份之前该页面从未出现过这种现象。推测：微信的后续更新中对微信小程序基础库进行了重构，导致点击输入框后页
微信小程序之----------表单组件input输入框
柠檬不萌只是酸i
06-08 4931
（1） placeholder-class 和 placeholder-style 的区别： placeholder-style 用来改变 input输入框里面设置的 placeholder值的字体颜色 placeholder-class 相当于添加一个改变placeholder的类 <view class='item'> <view class='titl...
uniapp微信小程序开发如何解决input框或者（textarea）框输入时界面被顶起，输入法遮盖输入框的问题？
SLife4599的博客
05-25 6118
最近在写微信小程序开发，客服吐槽，点击输入时界面总是被顶起来，输入框也被遮挡了一半，以下是解决方案。 首先将输入框设置为不向上顶页面的参数如下 输入框参数 :adjust-position="false" //键盘弹起时，是否自动上推页面 默认的是true 将其改为false :show-confirm-bar="false" //这个是是否显示完成按钮的 默认也是true 我这边不需要，看情况设置 @focus="getHeight" //输入框聚焦的时候触发 里面是触发的方法名称 可以自行设置 @b
uniapp h5中输入框输入时，会将内容顶上去的解决方案
博客简介
05-05 5550
h5中输入框输入时会导致键盘将页面顶上去，本文章写了完整的解决方案，以及思路提供参考 （监听键盘的打开和关闭事件）
uniapp小程序项目解决键盘问题
最新发布
m0_61368323的博客
07-17 900
步骤：1. 使用adjust-position属性，禁止页面上移；2. 但此时如果输入框在底部，当点击输入时，键盘会弹起，这时候需要动态移动输入框的位置，使输入框位于键盘的上面，所以页需要获取键盘的高度。知识点：1. input有一个adjust-position属性，控制当键盘弹起时，是否自动上推页面。
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
梅花寺
02-07 6093
由于获取的系统的尺寸单位都是 px ，给 bottom 设置的值单位也一定要是 px!不能因为是手机端就用 rpx，2倍的 rpx 也不可以，因为并不是每个手机分辨率都是我们设计图上375的2倍，一定要用 px 啊！最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
uniapp小程序自定义顶部导航栏，输入框软键盘把顶部顶上去的解决方法
weixin_51426266的博客
09-23 9031
首先在小程序input标签增加:adjust-position="false"的属性，然后已经可以把软键盘不使上方顶出，但是输入框也会因此被遮挡。this.inputHeight = e.detail.height //这个高度就是软键盘的高度。但是，这样就会出现键盘遮挡输入框的情况。解决后再附上解决方法。最后给所需要的输入框增加，动态绑定样式，问题就解决了。解决方法：在input输入框聚焦的方法中增加操作。
uniapp实现带输入框的弹出框
m0_58135258的博客
07-04 1万+
uniapp实现带输入框的弹出框
UNI-APP_uniapp带输入框的弹窗
小歪博客
02-25 5469
<template> <view> <!--弹窗--> <modal v-if="showPop" title="删除图片需要管理员密码" confirm-text="确定" cancel-text="取消" @cancel="cancelPop" @confirm="confirmPop"> <input type='password' placeholder="请输入密码" /> </modal> &l.
uniapp 使用input软键盘弹出时将input框内容上移的问题
weixin_44639993的博客
01-16 2001
由于input框默认开启软键盘上顶功能，但是页面又固定了高度，导致input上顶了页面没上顶。
h5底部输入框被键盘遮挡_微信 H5 页面兼容性解决方案
weixin_39528029的博客
10-25 1017
最近给公司微信公众号，写了微信h5业务页面，总结分享一下前端开发过程中的几个兼容性坑，项目直接拿的公司页面，所以下文涉及图片都模糊处理了。1、ios端兼容input光标高度问题详情描述：input输入框光标，在安卓手机上显示没有问题，但是在苹果手机上当点击输入的时候，光标的高度和父盒子的高度一样。例如下图，左图是正常所期待的输入框光标，右边是ios的input光标。出现原因分析：通常我们...
微信小程序（组件--表单：交互控件）
2301_77110605的博客
04-20 766
针对Android程序员，我这边给大家整理了一些资料，包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！往期Android高级架构资料、源码、笔记、视频。高级UI、性能优化、架构师课程、混合式开发（ReactNative+Weex）全方面的Android进阶实践技术，群内还有技术大牛一起讨论交流解决问题。
vue+uni-app实现弹出框效果
m0_64054560的博客
02-21 1229
vue使用基本组件传值，实现点击弹出弹框并传输数据的操作
uni-app点击按钮弹出提示框,选择确定和取消
热门推荐
泪耳的博客
01-17 1万+
uni-app点击按钮弹出提示框,选择确定和取消 以下是在写app页面时，遇到的感觉比较好用的弹框效果，仅以此记录，一个是弹框效果-uni.showModal(OBJECT)，一个是跳转页面uni.navigateTo（{}），大家有需要的可以参考一下哦 <template> <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" @click="open()"
移动端技术问题 — H5页面底部弹出页input输入时整个弹出页被输入法顶起的解决方法
Mr.Zheng
05-15 7294
1、问题 在开发移动端页面时遇到一个问题，在手机浏览器上底部弹出页input输入时整个弹出页被输入法顶起，导致浏览器 的地址栏遮住了被顶起的顶部部分页面 2、解决 通过调试分析发现，部分手机自带的浏览器显示正常，但是在第三方浏览器中页面被输入法顶起，因为我的页面已经 写完，重写耗时较长，在原有基础上，进行了优化。 页面样式：定...
uniapp input滑动时输入框内内容脱离输入框问题
dddxz_2的博客
01-17 848
解决思路：滑动时使input主动失焦，或input聚焦时不允许页面滑动，但input没有主动失焦事件，不允许页面滑动的方法在该项目不适用，经观察，每次input框内内容脱离软键盘都弹起，故解决方法为监听页面滑动，滑动时收起软键盘uni.hideKeyboard()问题：for循环数据后需要滚动，若input框不失焦则输入框内文字会脱离输入框，浮在屏幕上。需求：后台添加需要输入的项，前端展示+提交。
解决uni小程序在IOS端input框被软键盘‘挤上去’的问题
qq_43549412的博客
04-28 2405
结果是能解决 但处理的方式不好，会留出很大的空隙，影响美观，后面又产生在input获取焦点和失去焦点上想办法 做处理但这样的感觉会跳一下，觉得不是很好，让弹出框滑动出软键盘的高度，参考的很多办法，实现起来无疑同ui说，帮我重新设计一下，bug改好等于重做。本人前端小白一枚，偶然遇到在ios端input框被遮挡的问题，十分苦恼，也尝试了很多解决办法但都不是很有效，最后在一位大牛的帮助下得到解决，想记录一下分享一下，如果你也遇到可以尝试一样看看！若有更好的解决办法，还望告知！然后给父元素动态添加高度就可以了。
uni-app 软键盘顶起底部fixed定位的输入框
杨葱儿
09-25 5026
当点击input框时，软键盘弹出，把fixed定位的输入框向上推起，给input框设置：:adjust-position="true" 即可 <view class="cu-bar search bg-white" style="position: fixed;left: 0;bottom: 0;width: 100%;z-index: 9999;" > <view class="search-form"> <input :adjust-position="tru..
uniapp 手写输入法
09-23
在UniApp中实现手写输入法可以通过以下步骤进行： 1. 引入手写输入法的第三方库：首先，需要找到适用于UniApp的手写输入法的第三方库。一些常用的手写输入法库包括 HWTInputMethod、UniPen 等。可以通过在 UniApp 项目中引入这些库来实现手写输入功能。 2. 配置手写输入法：根据手写输入法库的文档，按照其提供的配置方法进行配置。这通常包括设置手写输入法界面、定义输入法样式和行为，以及注册事件处理程序等。 3. 实现手写输入功能：在需要使用手写输入法的页面中，添加手写输入的相关组件或方法。这可以是一个手写输入框、按钮或者手势识别等。根据手写输入法库的文档，使用相应的接口来获取用户的手写输入，并将输入结果展示在页面上。 4. 处理手写结果：根据手写输入法库提供的回调或事件，获取用户输入的手写结果，并进行相应的处理。可以将结果保存到变量中，或者发送给后端进行进一步处理。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

野猪佩奇007

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

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

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

打赏作者

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

抵扣说明：

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

余额充值