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

最新推荐文章于 2024-12-31 14:32:00 发布

啧啧静

最新推荐文章于 2024-12-31 14:32:00 发布

阅读量1.3k

点赞数

文章标签： safari 前端 ios vue.js

本文链接：https://blog.youkuaiyun.com/zezejingi/article/details/132197557

版权

如下图所示：

复现步骤：
在Safari 浏览器打开，在field输入数字，然后点击空白页让field失去焦点，就能看到输入框内文字错位点击清空也失效。

设备/浏览器：
ios 16.4.1 safari16.4

safari / 微信浏览器中 input 输入框内容重叠。此问题 ios16 居多，安卓无此类问题。

代替方案：
删除输入框清除 icon，无清除 icon 时无此问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

啧啧静

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

解决 Vant 框架的 Field 组件 rules 规则错误提示语不动态改变

忘忧

04-26

1564

Vant 的 Field 组件通过 rules 属性来设置验证表单的动态错误提示语

关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析

最新发布

qq_34891426的博客

12-31

448

vue h5 iOS14 textarea/van-field 获取焦点输入框未被键盘顶起

vant2表单组件Field在iOS上校验出错

Liu

09-08

1655

在安卓手机上可以正常校验，但iOS系统无论输入几个字符都会提示错误，原因可能是iOS输入法会输入特殊字符。需要校验用户的输入，长度超出进行错误提示，所以使用了正则表达式进行校验，代码如下。

微信小程序使用 vant-weapp 组件 van-field 类型为 textarea 在IOS端出现的问题记录

weixin_49993071的博客

03-07

2987

微信小程序使用 vant-weapp 组件 van-field 类型为 textarea 在 IOS 端出现的问题记录

移动端van-field输入框内容过长时安卓和ios显示的样式不一样?

tan_xiao_tan的博客

04-10

979

【代码】移动端van-field输入框内容过长时安卓和ios显示的样式不一样?

vant框架的输入框在IOS上出现输入空格不显示，需要在输入字符才展示问题

由入门到精通

02-28

1142

在van-field 标签里面加一个white-space:pre；把textarea文本域的空格显示规则换成了pre的模式，能正常输入空格显示。

移动端ios输入框自动聚焦问题

栗子的成长ing

12-25

5742

之前有遇到关于input聚焦的问题，但是一直没总结。今天有时间就整理总结以下。一. autofocus 在pc/安卓手机上都有效，但是在ios的safari浏览器上不起作用。因此对于ios手机上input自动聚焦问题，需要特殊处理下。二.ios手机上，input的focus事件需要通过用户交互才能触发。当按钮和input框在同一个页面时，可以通过切换display状态,来显示...

解决ios环境下点击输入框页面被顶起不能自动回弹到底部问题

YY110621的博客

02-25

8199

前几天开发中遇到的问题，vue移动端页面，点击输入框页面被顶起不能自动回弹到底部，底部会留白问题。网上查了很多方法试过都没用，最终还是找到了一个很有用的解决方式，下面提供解决方法，有需要的直接可以拿去用先看下问题的效果图吧： ios环境下点击输入框页面被顶起不能自动回弹到底部，底部留白问题第一步：在页面的输入框中添加获取焦点事件代码写法： @focus="getFocus" ...

h5网页嵌套安卓苹果APP内微信内打开H5等遇到的各种适配问题与解决方案汇总 --持续更新

Beatingworldline的博客

08-06

1470

在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。

弹出输入框，出现光标错位

helloworldbey的博客

01-03

2204

本次开发中，遇到了一问题就是，在一个弹出框狂中有一个input标签，当刷新页面的时候会有很大几率出现input框标签光标会错位；遇到这个问题的时候我也是一脸懵逼，所以我向百度求助，很快就得到了答案，我的开发中弹窗是用的框架vant中的van-popup标签，vant是一个很好用的移动端开发ui框架，大家可以试试；光标错位的原因是弹出框样式定义了定位样式position:fixed,将这个样式改为p...

ios浏览器上，复选框checkbox默认选中或勾选时，不显示的问题

H_hanlinglingzi的博客

03-10

1494

检查input标签，css样式-webkit-appearance属性设置是否为none或auto 更改为checkbox

ios11 input和fixed的不兼容（光标错位）

好人一生平安

11-04

417

在ios11的的手机里，一个弹出输入框是fixed定位的话，点击输入会发下光标和输入框的位置错位，导致无法输入。 1.把fixed定位改成absolute的定位 2.监听弹出框的时候页面滚动的高度，动态设置弹出框的top值 var initTopH = function() { var tempH = $(".van-dialog").height(); //弹框高度 var sc...

关于vant2 组件van-dropdown-item，在IOS手机上，特定条件下无法点击问题的探讨

jifashihan的博客

08-15

2133

van-dropdown-menu 在IOS上不能点击

【bug记录1】vant-swipe组件在ios上初始加载后右边显示存在空白间隙

weixin_57208584的博客

07-29

504

是因为轮播图中的img元素，默认是inline元素，但却对它设置了宽高，期望它横向撑满父元素，但这其实是无效设置。但是从移动端进入web-view的时候，进入到页面轮播图一会显示正常，一会儿轮播图右边出现了空白间隙，时好时坏。因而可能导致swipe初始化的时候由于网络请求或者初始布局的原因，图片元素没能正确布局。开发的页面使用到了vant中的swipe组件去封装轮播图，在浏览器调试一切良好。元素的宽高就是它包含的文字或图片的宽高，不可设置改变。移动端的web-view业务项目开发。最后给img元素设置。

vant DropdownMenu下拉菜单有白边问题

Crazy_Sakura的博客

06-02

4179

经调试发现在组件中的van-dropdown-menu__barcss类中设置了一个阴影解决方法就是写一个box-shadow: unset !important将原有的样式覆盖掉搞定！！！继续填坑

vant tab组件解决文字过多显示不全的问题

孙少的博客

11-17

1302

vant tab组件解决文字过多显示不全的问题

vue移动端项目在IOS上点击输入框失效，需要点击多次

GUOQIPING_的博客

06-09

886

1. 近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，那么导致这个问题所在的原因是因为项目中引入了FastClick 这个是解决移动端延迟300毫秒的优化 2.当使用FastClick 时，输入框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法如下： FastClick.prototype.focus = function (targetElement) { let length; i

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

CuiCui_web的博客

07-31

2999

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

vant组件库的使用流程及浏览器适配方式

04-07

Vant组件库使用流程： 1. 安装Vant组件库 通过npm安装Vant组件库： ``` npm install vant --save ``` 2. 引入Vant组件库 在需要使用Vant组件的页面中引入Vant组件库： ``` import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 使用Vant组件在页面中使用Vant组件： ``` <template> <van-button>按钮</van-button> </template> ``` 浏览器适配方式： Vant组件库支持大部分现代浏览器，具体支持情况可查看官方文档。对于不支持的浏览器，可以通过polyfill来实现兼容。在项目中引入babel-polyfill即可： ``` import 'babel-polyfill'; ```