html - IOS 设备出现 HTML 表单输入问题(类型 = 文本)

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;
     }

所以只需删除它或将其设置为默认值。如果您的目的是阻止人们在您的网站上选择内容，请确保将此样式属性重置为 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;
     }