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

已于 2023-06-14 17:49:49 修改
阅读量313 收藏 1
点赞数
文章标签： vue.js 前端
于 2023-06-14 17:46:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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">
Luckily_SY
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题
我仰泳一级棒
03-17 2477
问题: 在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久, ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了 后面同事提了个思路,当我点击搜索框的时候,会弹出软键盘,往上滑的话,搜索框也会跟着滑走,那我们就在滑动上做文章.往上滑的时候(或者点击屏幕的时候) 让软键盘消失就ok了,那么页面就不会被撑高了 vue开发代码 mounted () { document.body.addEventListener('to
【项目复盘Vue2-移动端】IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题
Weiqian_的博客
04-13 4151
IOS使用Vant表单组件输入框获取焦点后放大页面，安卓软键盘遮挡问题解决思路
vue+Vant，关闭Popup弹框，遮罩层并没有消失
最新发布
yaya07755的专栏
09-27 2449
点击Popup弹框关闭按钮，弹框的遮罩不能正常关闭，如下图。经研究，排除了popup属性问题，最后只能删除代码排除法。原因是搜索框的事件未定义，去掉@search="onSearch"和@search="onSearch"即可。或者在js里定义方法onSearch。
ios在数字键盘左下角添加“完成”按钮的实现原理
jaybin的技术博客
11-06 7679
最近要在系统弹出的数字键盘上的左下角额外添加一个自定制的完成按钮，于是研究了一下系统自带键盘添加自定制按钮的实现方式。总结了一下大体上的通用做法，原理大概是这样：当页面上的文本框或其他输入源因为用户的点击而变成第一响应者的时候（becomeFirstResponder），系统键盘就会弹出。而每次键盘弹出或收起时，都会向系统发送相关的键盘事件即通知消息（notification）。所以，我们只要在键
ios html5 日期选择控件,IOS在移动端点击日期插件如何去掉底部自动弹出“完成”按钮？...
weixin_33309433的博客
06-10 377
用了日期插件：iphone手机测试的时候，点击日期插件，iphone底部会出现这个，如图：需要先点击取消‘完成’才能继续选择日期，所以，1这个‘完成’是ios系统自带的嚒？？？和日期插件有关系嘛？2如何取消这个‘完成’框？回答这个弹出的完成，原来是iphone的弹出键盘，怪我没有iphone手机。那么原因就是：ios中的只读readonly属性不起作用，这个只读属性在安卓上可以阻止输入，所以键盘不...
解决VantUI popup 弹窗不弹出或无蒙层的问题
01-18
背景 ####组件PopupTime.vue 把vant官网的popup+时间选择器抽成组件： popup1show: true 即弹窗显示 <van v-model=popup1show position=bottom overlay=true click-overlay=clickOverlay> <van-datetime-...
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 4598
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-field textarea 二次封装 高度自适应并设置最大最小高度
Poppy_LYT的博客
08-30 1万+
1、components新建CommentField.vue <template> <div class="comment-field-wrap"> <div class="comment-field__input"> <van-field :value="value" placeholder="请输入留言内容" rows="1" // 显示为一行的高度 type="texta.
vux的popup组件的ios兼容问题
shuXIanS的博客
11-08 6190
vux的popup组件在ios上的兼容性问题：当弹出层弹出后滚动到弹出层底部时，弹出层后面的背景是可以滚动的。 解决方法：使用vue的watch属性监听弹出层的显示状态，然后强制改变body的属性，让其不可滚动，具体见代码。 watch：{ filterShow: { deep: true, handler: function (newV, oldV) { this.stopBodyScroll(...
Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题
qq_31065757的博客
05-09 2936
Vue，Vant2的Popup弹出层滚动问题IOS底部fixed定位失效问题
vue监听移动端软件键盘搜索（enter）事件
Lval的博客
09-26 4989
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 2713
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 5389
最近使用 VantUI 的弹出层 van-popup 组件发现了奇怪的问题，在安卓中正常，在IOS中则会出现部分被遮挡的问题，看到官方文档可以指定弹出层的挂载节点。 get-container="元素id" 我这里直接挂载到了根节点 #app下 <van-popup get-container="#app" ...> </van-popup> ...
css 解决ios设备固定背景图的显示问题。background-attachment: fixed在iphone设备上失效；
PrimaryColor
12-01 2516
设置背景图固定，滚动内容时背景图不滚动。在android上是没有问题的，但是ios上就是会被内容挤出去，滚动的时候背景图变形。通过background-attachment: fixed;和定位的方法实现或还是会出现图片变形，或者盒子被撑大。最终采用动态添加::before伪元素样式实现图片的固定布局。背景图如果直接写死是没有问题的，动态绑定添加的就有问题。
vant weapp popup弹出层遮住内容，遮罩层变成纯黑色解决办法！
海贼王某人的博客
09-29 5063
先看一下问题图片： 解决办法：把你的弹出层组件vant-poput放在最外层盒子，不要放在里层就ok了
vant组件库中的field在Safari浏览器、ios系统显示异常
zezejingi的博客
08-09 998
在Safari 浏览器打开，在field输入数字，然后点击空白页让field失去焦点 ，就能看到输入框内文字错位 点击清空也失效。safari / 微信浏览器中 input 输入框内容重叠。此问题 ios16 居多，安卓无此类问题。删除输入框清除 icon，无清除 icon 时无此问题。
vue 项目软键盘回车触发搜索事件
qq_37942845的博客
07-08 5282
目的：掉起来右下角为搜索的按钮 步骤： 1、input的type改为search，再写keydown按下时的事件调取搜索事件的方法 这样安卓手机上回车就变成了“搜索”，不过ios仍然是换行 2、input 外面套form，必须要有action，action=“javascript:return true” 我的项目用van：想弹出数字键盘，并监听搜索（换行），在安卓上执行搜索按钮...
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` 的背景设置为透明了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值