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

web*_*icy 16 html forms iphone input ios

所以我有一个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>
Run Code Online (Sandbox Code Playgroud)

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

web*_*icy 56

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

  *, *:before, *:after {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
     }
Run Code Online (Sandbox Code Playgroud)

所以只需将其删除或将其设置为默认值即可.如果您打算阻止人们在您的网站上选择内容,请确保将此样式属性重置为默认输入

  input, input:before, input:after {
      -webkit-user-select: initial;
      -khtml-user-select: initial;
      -moz-user-select: initial;
      -ms-user-select: initial;
      user-select: initial;
     } 
Run Code Online (Sandbox Code Playgroud)

  • 我有同样的问题,上面的解决方案似乎不起作用. (3认同)