vue，H5，Vant，iOS系统16.5中点键盘完成，van-popup，van-form背景不消失

Luckily_SY

已于 2023-06-14 17:49:49 修改

阅读量317

点赞数

文章标签： vue.js 前端

于 2023-06-14 17:46:57 首次发布

本文链接：https://blog.csdn.net/weixin_46937852/article/details/131212989

版权

ios系统升级后点键盘完成van-popup不兼容背景没有隐藏
vue，H5，Vant，iOS目前系统16.5中点键盘完成，van-popup，van-form背景不消失
解决办法设置高为100vhvh

 <van-popup position="bottom" :style="{height:'100vh'}" v-model="addshow">

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Luckily_SY

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

由Vant Field组件得到解决IOS输入框 键盘上推问题

不才的博客：https://www.notbucai.com/

06-04

4551

前言前几天公司让写一个客户数据入录页面（就是个带了logo的表单页面），就直接选择用原生的直接上，原以为也就个把小时的事情（确实个把小时就写完了），但是测试发现ios（没有测试多个，至少qq浏览器会）会输入的时候导致页面上推严重影响用户体验。可直接转第三部分由开源库找到方案 Vant Field组件通过看源码发现Field在blur事件时候会执行一个滚动事件贴代码：reset-scroll.ts // reset-scroll.ts import { isIOS as checkIsI

【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题

Weiqian_的博客

04-13

4171

IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题解决思路

1 条评论您还未登录，请先登录后发表或查看评论

解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题

我仰泳一级棒

03-17

2483

问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了后面同事提了个思路,当我点击搜索框的时候,会弹出软键盘,往上滑的话,搜索框也会跟着滑走,那我们就在滑动上做文章.往上滑的时候(或者点击屏幕的时候) 让软键盘消失就ok了,那么页面就不会被撑高了 vue开发代码 mounted () { document.body.addEventListener('to

vue+Vant，关闭Popup弹框，遮罩层并没有消失

最新发布

yaya07755的专栏

09-27

2495

点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。

ios在数字键盘左下角添加“完成”按钮的实现原理

jaybin的技术博客

11-06

7683

最近要在系统弹出的数字键盘上的左下角额外添加一个自定制的完成按钮，于是研究了一下系统自带键盘添加自定制按钮的实现方式。总结了一下大体上的通用做法，原理大概是这样：当页面上的文本框或其他输入源因为用户的点击而变成第一响应者的时候（becomeFirstResponder），系统键盘就会弹出。而每次键盘弹出或收起时，都会向系统发送相关的键盘事件即通知消息（notification）。所以，我们只要在键

ios html5 日期选择控件,IOS在移动端点击日期插件如何去掉底部自动弹出“完成”按钮？...

weixin_33309433的博客

06-10

378

用了日期插件：iphone手机测试的时候，点击日期插件，iphone底部会出现这个，如图：需要先点击取消‘完成’才能继续选择日期，所以，1这个‘完成’是ios系统自带的嚒？？？和日期插件有关系嘛？2如何取消这个‘完成’框？回答这个弹出的完成，原来是iphone的弹出键盘，怪我没有iphone手机。那么原因就是：ios中的只读readonly属性不起作用，这个只读属性在安卓上可以阻止输入，所以键盘不...

解决VantUI popup 弹窗不弹出或无蒙层的问题

01-18

背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van-datetime-picker show-toolbar :title=popupTitle.popupName v-model=

vue移动端vant的layout布局van-row，van-col实现带背景色table表格

热门推荐

qq_33235680的博客

07-01

1万+

vue移动端vant的layout布局van-row，van-col实现带背景色table表格

vant组件van-field和van-picke一起使用的采坑记录

Q_Q104926的博客

04-21

4618

vant组件van-field和van-picke一起使用的采坑记录1、单独放一个van-picker2、单独放一个van-poup3、将van-picker放在van-poup中使用vant组件写APP端form表单，从官网拿过来的van-field标签和van-popup标签，放在页面，没有任何效果。官网拿过来的改了数据和显示文本，如下图所示。 <!DOCTYPE html> <html lang="en"> <head> <meta chars

vue使用vant中的checkbox实现全选功能

01-18

本文实例为大家分享了vue使用vant中的checkbox实现全选功能的具体代码，供大家参考，具体内容如下 <li v-for=(item, key=index> <van v-model=item.flag class=listli ></van> <p>{{ item.name

vant-- van-form 使用

King Saj

04-06

2502

需求: 输入框要求: 1: 必填项展示 2: 格式效验 3:可以清除 4:上传图片限制大小,类型手机号: 校验邮箱: 校验效果: 代码 <van-form ref="form"> <van-field v-model="form.name" clearable name="姓名" label="姓名" placeholder="姓名" required :rules="rules.

vux的popup组件的ios兼容问题

shuXIanS的博客

11-08

6193

vux的popup组件在ios上的兼容性问题：当弹出层弹出后滚动到弹出层底部时，弹出层后面的背景是可以滚动的。解决方法：使用vue的watch属性监听弹出层的显示状态，然后强制改变body的属性，让其不可滚动，具体见代码。 watch：{ filterShow: { deep: true, handler: function (newV, oldV) { this.stopBodyScroll(...

Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题

qq_31065757的博客

05-09

2942

Vue，Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题

vue监听移动端软件键盘搜索（enter）事件

Lval的博客

09-26

4994

vue监听移动端软键盘搜索事件 vue中监听手机键盘的【完成】或【搜索】按钮触发事件，需要两个条件 1.form表单，输入框 2.@keyup.13 事件或者直接@keyup 然后事件的处理函数里判断 event.keyCode === 13 <input type="text" @keyup.13 = "handleKeyUp" placeholder="请输入用户手机号" v-mod...

vant兼容问题之van-popup组件在ios上出现重叠问题

CuiCui_web的博客

07-31

2723

van-popup组件在ios上出现重叠问题利用更改挂载节点来解决此问题。 <van-popup v-model="pickerRuler" position="bottom" :get-container="$parent.getContainer"> <div class="content"> </div> </van-popup> created(){ this.popDivContainer = document.crea

VantUI van-popup 在 IOS 被遮挡问题

ZionHH的博客

09-25

5409

最近使用 VantUI 的弹出层 van-popup 组件发现了奇怪的问题，在安卓中正常，在IOS中则会出现部分被遮挡的问题，看到官方文档可以指定弹出层的挂载节点。 get-container="元素id" 我这里直接挂载到了根节点 #app下 <van-popup get-container="#app" ...> </van-popup> ...

css 解决ios设备固定背景图的显示问题。background-attachment: fixed在iphone设备上失效；

PrimaryColor

12-01

2530

设置背景图固定，滚动内容时背景图不滚动。在android上是没有问题的，但是ios上就是会被内容挤出去，滚动的时候背景图变形。通过background-attachment: fixed;和定位的方法实现或还是会出现图片变形，或者盒子被撑大。最终采用动态添加::before伪元素样式实现图片的固定布局。背景图如果直接写死是没有问题的，动态绑定添加的就有问题。

vant weapp popup弹出层遮住内容，遮罩层变成纯黑色解决办法！

海贼王某人的博客

09-29

5081

先看一下问题图片：解决办法：把你的弹出层组件vant-poput放在最外层盒子，不要放在里层就ok了

vant组件库中的field在Safari浏览器、ios系统显示异常

zezejingi的博客

08-09

1013

在Safari 浏览器打开，在field输入数字，然后点击空白页让field失去焦点，就能看到输入框内文字错位点击清空也失效。safari / 微信浏览器中 input 输入框内容重叠。此问题 ios16 居多，安卓无此类问题。删除输入框清除 icon，无清除 icon 时无此问题。

vue vant form设置van-cell背景透明

06-09

你可以在 `van-cell` 上设置 `style` 属性，并将 `background-color` 设置为 `transparent`，即可将 `van-cell` 的背景设置为透明。例如： ```html <van-cell style="background-color: transparent;">内容</van-cell> ``` 或者你可以通过在 `van-form` 上设置全局样式来实现： ```css .van-cell__content { background-color: transparent; } ``` 这样就可以将所有 `van-cell` 的背景设置为透明了。