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

问题描述 投票:15回答:2

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

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

html ios iphone forms input
2个回答
50
投票

发现问题,这是我在网上找到的样式表重置,以帮助触摸设备行为,当用户触摸/保持元素时,我将其复制到我的大多数项目中。所以如果你有这个问题,你很可能在你的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;
     } 

0
投票

在我的情况下,问题是角度材料包,版本1.1.2。更新后(1.1.18),一切都按预期工作。

© www.soinside.com 2019 - 2024. All rights reserved.