Question

所以我有一个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>

我尝试添加自动对焦属性，预设值并且仍然相同。

Answer 1

发现问题，我找到了一个样式表重置，我在网上找到帮助触摸设备的行为，当用户触摸/保持一个元素时，我将其复制到我的大多数项目中。所以，如果你有这个问题，你很可能在你的css中有这些行：

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

所以只需删除它或将其设置为默认值即可。如果您打算阻止人们在您的网站上选择内容，请确保在输入

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

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

Answer 2

我有一个类似的问题，但是原因很具体。我希望有人还会发现它有用。

我在Safari中的.webp图像支持中使用了webp-hero polyfill，事实证明，这在iOS设备上引起了此问题。这是他们的known bug，但我一直努力地将各个点连接起来。

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

Answer 3

在我的情况下，角材料包的版本为1.1.2。更新（1.1.18）后，一切都会按预期进行。

iOS表单输入的IOS设备问题（类型=文本）

3 个答案: