解决 input 输入框在 iOS 系统中无法输入内容

简介: 解决 input 输入框在 iOS 系统中无法输入内容

问题

input 输入框在 Android 系统可以输入和点击,但是在 iOS 系统上 input 输入框无法点击和输入。

解决方法

方案一:在代码中查找并去掉下列样式

-webkit-touch-callout:none;
-webkit-user-select:none;

方案二:使用 not 选择器匹配不是 input, textarea 标签的每个元素

*:not(input, textarea) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

拓展知识

关于 user-select 属性

定义和用法

user-select 属性规定是否能选取元素的文本。

在 web 浏览器中,如果您在文本上双击,文本会被选取或高亮显示。此属性用于阻止这种行为。

语法

user-select: auto|none|text|all;

JavaScript 语法:

object.style.userSelect="none"

属性值

描述
auto 默认。如果浏览器允许,则可以选择文本。
none 防止文本选取。
text 文本可被用户选取。
all 单击选取文本,而不是双击。

兼容性:

表格中的数字注明了完全支持该属性的首个浏览器版本。

跟随 -webkit-、-ms- 或 -moz- 的数字规定使用前缀的首个版本。

属性 chrome IE Firefox Safari opera
user-select 54.06.0 -webkit- 79.010.0 -ms- 69.02.0 -moz- 3.1 -webkit- 41.015.0 -webkit-

关于 -webkit-touch-callout 属性

注意:该特性是非标准的,请尽量不要在生产环境中使用它!

概述:-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示, callout 是指当触摸并按住一个元素的时候出现的提示。

当在iOS上一直按住一个目标元素时,Safari会展示一个关于这个链接的callout信息。webkit-touch-callout 属性允许禁用掉这一行为。

语法:

-webkit-touch-callout: default   /* 显示标注 */
-webkit-touch-callout: none      /* 禁用标注 */
-webkit-touch-callout: initial
-webkit-touch-callout: inherit
-webkit-touch-callout: unset

示例:

.example {
  -webkit-touch-callout: none;
}

兼容性:

不是任何规范的一部分。

iOS 2.0及更高版本的Safari浏览器可用

Android尚不明确


相关文章
|
iOS开发
Cisco Catalyst 9800 Wireless Controller, IOS XE Release 17.17.1 ED - 思科无线控制器系统软件
Cisco Catalyst 9800 Wireless Controller, IOS XE Release 17.17.1 ED - 思科无线控制器系统软件
432 9
Cisco Catalyst 9800 Wireless Controller, IOS XE Release 17.17.1 ED - 思科无线控制器系统软件
|
7月前
|
安全 5G 语音技术
Cisco ASR 9000 Router IOS XR Release 7.11.2 MD - ASR 9000 系列聚合服务路由器系统软件
Cisco ASR 9000 Router IOS XR Release 7.11.2 MD - ASR 9000 系列聚合服务路由器系统软件
359 4
Cisco ASR 9000 Router IOS XR Release 7.11.2 MD - ASR 9000 系列聚合服务路由器系统软件
|
云安全 安全 Cloud Native
Cisco Catalyst 8000 Series IOS XE 17.18.1a ED 发布 - 思科边缘平台系列系统软件
Cisco Catalyst 8000 Series IOS XE 17.18.1a ED - 思科边缘平台系列系统软件
253 0
|
运维 监控 安全
Cisco ISR 4000 Series IOS XE 17.18.1a ED 发布 - 思科 4000 系列集成服务路由器 IOS XE 系统软件
Cisco ISR 4000 Series IOS XE 17.18.1a ED - 思科 4000 系列集成服务路由器 IOS XE 系统软件
302 0
|
安全 Android开发 数据安全/隐私保护
深入探讨iOS与Android系统安全性对比分析
在移动操作系统领域,iOS和Android无疑是两大巨头。本文从技术角度出发,对这两个系统的架构、安全机制以及用户隐私保护等方面进行了详细的比较分析。通过深入探讨,我们旨在揭示两个系统在安全性方面的差异,并为用户提供一些实用的安全建议。
|
人工智能 监控 安全
思科 Catalyst 9000 交换产品系列 IOS XE 系统软件 17.18.1 ED
Cisco Catalyst 9000 Series Switches, IOS XE Release 17.18.1 ED
309 0
|
安全 Android开发 数据安全/隐私保护
深入探索Android与iOS系统安全性的对比分析
在当今数字化时代,移动操作系统的安全已成为用户和开发者共同关注的重点。本文旨在通过比较Android与iOS两大主流操作系统在安全性方面的差异,揭示两者在设计理念、权限管理、应用审核机制等方面的不同之处。我们将探讨这些差异如何影响用户的安全体验以及可能带来的风险。
1057 21
|
传感器 iOS开发 UED
探索iOS生态系统:从App Store优化到用户体验提升
本文旨在深入探讨iOS生态系统的多个方面,特别是如何通过App Store优化(ASO)和改进用户体验来提升应用的市场表现。不同于常规摘要仅概述文章内容的方式,我们将直接进入主题,首先介绍ASO的重要性及其对开发者的意义;接着分析当前iOS平台上用户行为的变化趋势以及这些变化如何影响应用程序的设计思路;最后提出几点实用建议帮助开发者更好地适应市场环境,增强自身竞争力。
|
安全 Android开发 iOS开发
深入探讨Android与iOS系统的差异及未来发展趋势
本文旨在深入分析Android和iOS两大移动操作系统的核心技术差异、用户体验以及各自的市场表现,进一步探讨它们在未来技术革新中可能的发展方向。通过对比两者的开放性、安全性、生态系统等方面,本文揭示了两大系统在移动设备市场中的竞争态势和潜在变革。
|
存储 安全 算法
深入探索iOS系统安全机制:保护用户隐私的前沿技术
本文旨在探讨苹果公司在其广受欢迎的iOS操作系统中实施的先进安全措施,这些措施如何共同作用以保护用户的隐私和数据安全。我们将深入了解iOS的安全架构,包括其硬件和软件层面的创新,以及苹果如何通过持续的软件更新来应对新兴的安全威胁。此外,我们还将讨论iOS系统中的一些关键安全功能,如Face ID、加密技术和沙箱环境,以及它们如何帮助防止未经授权的访问和数据泄露。

热门文章

最新文章