iOS设备问题与HTML表单输入（type = text） [英] IOS devices issues with HTML form input (type = text)

问题描述

所以我有一个带有两个字段的HTML登录表单：电子邮件和密码。除了iOS设备（iPhone，iPad）之外，这些设备的浏览器都可以轻松填充。
在IOS领域几乎没有焦点，一旦焦点出现，键盘弹出，我开始输入，但实际上没有填充。我曾在Chrome和Safari浏览器中尝试过，但仍然获得相同的结果。字段保持黑色。贝娄是我的表格是如何格式化的：

 < form method =postname =loginaction =login > 
< div class =divInputWrapper> 
< i class =icon-envelope inputIcon inlineElt>< / i> 
< label for =email>< / label> 
< input type =textname =emailplaceholder =输入您的电子邮件地址class =formInput/> 
< / div> 
< div class =divInputWrapper> 
< i class =icon-envelope inputIcon inlineElt>< / i> 
< label for =password>< / label> 
< input type =passwordname =passwordclass =formInput/> 
< / div> 
< button class =blue centeredContent>登入< / button> 
< / form> 
  

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

解决方案

发现这个问题，它是我在线发现的样式表重置，用于帮助用户触摸/保存元素时的触摸设备行为，并将其复制我的大部分项目。所以，如果你有这个问题，最有可能你在你的css中有这些行：

  *，*：before，*：在{
 -webkit-user-select：none; 
 -khtml-user-select：none; 
 -moz-user-select：none; 
 -ms-user-select：none; 
 user-select：none; 
} 
  

因此，只需将其删除或将其设置为默认值即可。如果您的目的是阻止人们选择您网站上的内容，请确保您将此样式属性重置为默认输入

 输入，输入：before，input：after {
 -webkit-user-select：initial; 
 -khtml-user-select：initial; 
 -moz-user-select：initial; 
 -ms-user-select：initial; 
 user-select：initial; 
} 
  

So I have an HTML login form with two fields: Email and Password. These can be filled easily on any device's browser other than IOS devices(iPhone,iPad). On IOS fields can hardly be in focus and once in focus,the keyboard pops up, I start typing but nothing is actually being filled. I have tried in both Chrome and safari and still get the same result. Field remain black. Bellow is how my form is formatted:

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

I tried adding an autofocus attribute, preset a value and still the same.

解决方案

Found the issue, it's a stylesheet reset I found online to help with touch devices behaviour for when the user touch/ hold an element and I copied it across most of my projects. So if you have this issue, it's most likely you have these lines in your css:

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

So just remove it or set it to default. And if your intention is to stop people from selecting stuff on your website, then make sure you reset this style property to default on 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;
     } 

这篇关于iOS设备问题与HTML表单输入（type = text）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！