IOS 设备与 HTML 表单输入有关的问题（类型 = 文本）答案

【问题标题】：IOS devices issues with HTML form input (type = text)IOS 设备与 HTML 表单输入有关的问题（类型 = 文本）
【发布时间】：2014-09-01 17:19:39
【问题描述】：

所以我有一个包含两个字段的 HTML 登录表单：电子邮件和密码。这些可以在除 IOS 设备（iPhone、iPad）之外的任何设备的浏览器上轻松填写。在 IOS 字段上几乎无法聚焦，一旦聚焦，键盘就会弹出，我开始打字，但实际上没有任何内容被填充。我在 Chrome 和 safari 中都尝试过，但仍然得到相同的结果。字段保持空白。以下是我的表单的格式：

<form method="post" name="login" action="login">
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="email"></label>
      <input type="text" name="email" placeholder="Enter your email address" class="formInput"/>
   </div>
   <div class="divInputWrapper ">
      <i class="icon-envelope inputIcon inlineElt"></i>
      <label for="password"></label>
      <input type="password" name="password" class="formInput"/>
    </div>
    <button class="blue centeredContent">Login</button>
</form>

我尝试添加一个自动对焦属性，预设一个值，还是一样。

【问题讨论】：

你有外部的css/js在运行吗？
您的 formInput 类中是否有任何奇怪的样式？喜欢将颜色和背景颜色设置为相同的值？例如代码示例在技术上没有任何问题......所以它应该可以工作。
我认为我们不能在 ios 设计的文本框中插入文本。苹果公司的人没那么傻。有许多项目具有人们可以在 ios 设备中输入文本的表单。很明显，这个问题是特定于您的项目的。比如你没有提供的js、css等。
旁注：您的<label> 标签不会有效，因为for 属性只会匹配与之关联的表单元素上的id 属性。（并且您没有指定任何 ID）
@scunliffe 感谢有关标签的提示。我曾经认为它是通过名称属性链接的。但是，该问题与任何 JS 文件无关，而是与您建议的样式问题有关。这完全是因为我使用了一些 样式表重置。我将在下面发布答案。非常感谢您的帮助

标签： html ios iphone forms input

【解决方案1】：

找到了问题，这是我在网上找到的样式表重置，以帮助处理触摸设备行为，当用户触摸/按住元素时，我将它复制到我的大部分项目中。所以如果你有这个问题，很可能你的 css 中有这些行：

  *, *:before, *:after {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
     }

所以只需将其删除或将其设置为默认值。如果您的意图是阻止人们在您的网站上选择内容，那么请确保在 inputs

上将此样式属性重置为默认值

  input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     }

【讨论】：

太好了，我为这个搜索了很长时间，我正在调试并且完全困惑。谢谢你。实际上，我从 bootstrap less 文件中导入的这些样式最终得到了这些样式，但是我的输入和按钮的基本样式相同，因此用于帮助按钮的 CSS 同时应用于我的输入..
我遇到了同样的问题，上面的解决方案似乎不起作用。
哦，谢谢。调试它真的很难。我认为它在 javascript 部分，因为我使用的是 angular。输入只能接受一个字符，它似乎失去了焦点，而实际上却没有。
我不敢相信。你是怎么发现的？有趣的是，它适用于除 iOS 之外的其他任何地方。
您不能将 :before 和 :after 用于输入元素

【解决方案2】：

我遇到了类似的问题，但其原因非常具体。我希望有人仍然会觉得它有用。

我在 Safari 中使用 webp-hero polyfill 来支持 .webp 图像，结果证明，它在 iOS 设备上导致了这个问题。这是他们身边的known bug，但我一直在努力将这些点联系起来。

很遗憾，我对此没有很好的解决方案。目前，我避免在带有表单的页面上使用 .webp 图像。

【讨论】：

【解决方案3】：

问题是由于您的字体不受支持而发生的。如果您希望 Mac 操作系统（Chrome 或 Safari）支持输入字段或密码

使用

line-height:24px;
font-family: sans-serif;
display:block;

检查此修复并告诉我。

【讨论】：

【解决方案4】：

在我的情况下，问题在于 angular-material 包，版本 1.1.2。更新 (1.1.18) 后，一切正常。

【讨论】：