select在苹果手机上的兼容性

最新推荐文章于 2025-12-02 16:39:05 发布

原创最新推荐文章于 2025-12-02 16:39:05 发布 · 968 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文详细解析了在页面中使用select选择框时，遇到的option内容在首次选择后无法再次显示的问题。阐述了该问题的原因在于选择后body未正确回滚，并提供了具体的解决代码，通过window.scrollTo方法实现页面的微调回滚。

问题：在页面中使用了select选择框后，第一次选择option中的内容是弹出的但是选中后再次点击选择，option中的内容不出现

原因及解决办法：

原因是弹窗弹出后，选择后，body没有回滚，造成了选择框在底部隐藏了；

解决办法在change中设置

window.scrollTo(0, document.body.scrollTop + 1);

document.body.scrollTop >= 1 && window.scrollTo(0, document.body.scrollTop - 1);

让其进行回滚

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

追根溯源

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动端苹果IOS中select的option值不显示问题解决

weixin_41346436的博客

12-26

3712

移动端苹果IOS中select的option值不显示问题解决遇到一个问题就是最原始的select标签在安卓手机上显示正常，但是在IOS苹果高版本上点击select，在页面上有占位，随便点击也可以将值选在文本框中，但是内容不显示,直接留白 1:这种情况发生于高版本的IOS系统中，然后观察了一下请选择和动态加载的option有什么区别，就是动态加载的值只用label绑定了，option标签中间并没有...

ios部分机型出现select、input等控件点击后失效不可再次点击dug

qq_40665861的博客

11-12

1099

问题描述在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。问题分析当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...

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

移动端苹果手机select兼容问题

林中明月间丶

04-04

8488

select{ -webkit-appearance: none; }

IOS与安卓关于select样式兼容性问题

helloword_js的博客

03-26

711

让我们先来看看IOS和安卓的区别造成这样的原因是IOS有自己的默认样式所以我们在兼容的时候首先清除默认的样式 -webkit-appearance: none; 然后select的边框已经倒三角样式都会被清除所以我们需要自己绘制倒三角添加border .slectIos1{ width: 0; height: 0; border-top: 1rem solid black;...

H5移动端select兼容苹果

Willow_Spring的博客

12-03

809

select在安卓显示如下在苹果如下用CSS解决 select{ -webkit-appearance: none; /*清除select默认样式*/ background: url("img/order_img/drop-down.png")no-repeat right; /*设置三角样式*/ background-size: 0.3rem; background-position-x: 96%; }= ...

select在ios和android中样式不兼容

qq_37672347的博客

09-18

1385

ios中select有默认样式，在Android中可以正常显示，但在ios中会变灰变短这样式显然不能满足我们的需要，解决办法。 1：设置css ： -webkit-appearance: none; 去掉默认的样式。 2：右边的小三角使用一个图片定位在那里。 select{ -webkit-appearance: none; /*清除select默认样式*/...

elementUI 中的 el-select组件在苹果手机浏览器中使用通过远程搜索获取不到query的值

09-09

苹果手机浏览器的输入法可能存在兼容性问题，可尝试在 `remote-method` 里对 `query` 进行处理，避免空值或者异常字符。示例如下： ```javascript remoteMethod(query) { query = query ? query.trim() : ''; if ...

苹果手机的html的select没有下拉箭头

07-03

苹果手机（iOS系统）的Safari浏览器中，`<select>` 元素默认的样式可能会隐藏下拉箭头，因为iOS倾向于使用系统原生的选择控件，而不是显示传统网页中的箭头图标。这种情况通常是由于iOS的默认样式覆盖了HTML元素的...

H5-ios兼容性问题

叶小树咯

07-25

744

h5开发遇到的ios兼容性问题

26、iOS开发：设备兼容性与功能实现

最新发布

h0i1j2k3l的博客

12-02

本文详细介绍了iOS开发中如何处理设备差异，特别是iPhone与iPod Touch在相机和定位功能上的区别。通过使用UIImagePickerController检测相机可用性并结合UIActionSheet提供用户选择，确保应用在无相机设备上仍可正常运行。同时，利用Core Location框架实现位置信息获取，涵盖CLLocationManager的初始化、代理方法处理、精度设置及电池消耗优化。文章还强调了设备兼容性、用户权限处理和实际测试的重要性，并提供了代码示例与流程图，帮助开发者构建稳定、高效的

仿苹果风格的移动端Select选择插件

综上所述，该“移动设备 select jquery插件”不仅仅是一个简单的表单控件替换工具，更是融合了用户体验设计、触控交互优化、跨平台兼容性处理和前端工程化思想的综合性解决方案。它代表了在移动互联网发展初期，前端...

ios 下 select和option 无法隐藏指定元素

weixin_30553777的博客

07-06

530

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>产品</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chro...

js实现删除select下拉框对应option（旧版本，现版本可以直接jQuery显示或隐藏，兼容IE）

Angelo的博客

01-18

717

下拉框代码：实现代码：

SELECT标签中OPTION的显隐控制(兼容IE和Safari)

Lime的博客

11-23

3407

问题描述：在有些功能切换的时候，select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。解决方案： 1、首先设置option的display:none的方案肯定是不可行了； 2、在option标签上面加上disabled="disabled"属性，表示不可用，这种方案只是让option不能选择，但没有隐藏掉...

解决el-select组件在IOS移动端的兼容问题，点击2次才能选中

奔跑吧代码

03-22

2235

解决el-select组件在IOS移动端的兼容问题，点击2次才能选中

javascript - 手机端兼容苹果select刷新不出来的问题

09-12

347

安卓端加载选择框可以正常加载 IOS端无法加载将attr 更换为 prop即可

uniapp写移动端，适配苹果手机底部导航栏，ios安全区问题,苹果手机遮挡底部信息，uview的u-action-sheet组件

THY0827的博客

10-25

1066

手机上有很多组件，需要手机底部弹窗来做选择,picker选择器，select列选择器呀这些，在苹果手机上会被底部nav遮住。采用了好几种配置的方式，多多少少都不太行，还是采用css来做吧，但是css来写想让它生效，可不是简单写写就行。3.模版当中加样式，因为我需要判断苹果手机才加样式，安卓不加，所以样式加了判断条件，大家看实际需求。组件中用人家封装的组件是这么用的，里面包括好几层，怎么拿到组件里面的样式设置。5.方法中去判断平台，加样式，这些都不详细说了。加上这个就完美解决了！