IOS 设备的 HTML 表单输入问题（类型 = 文本）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25610517/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
IOS devices issues with HTML form input (type = text)
提问by webicy
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:
所以我有一个包含两个字段的 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>
I tried adding an autofocus attribute, preset a value and still the same.
我尝试添加一个自动对焦属性，预设一个值，但仍然相同。
回答by webicy
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:
发现了这个问题，这是我在网上找到的一个样式表重置，用于帮助用户触摸/按住元素时的触摸设备行为，我将它复制到我的大多数项目中。因此，如果您遇到此问题，很可能您的 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;
}
回答by plascode
In my case problem was with the angular-material package, version 1.1.2. After the update (1.1.18), everything works as expected.
就我而言，问题出在 angular-material 包，版本 1.1.2。更新（1.1.18）后，一切正常。
回答by marjana666
I had a similar problem, but its cause was very specific. I hope someone will still find it useful.
我有一个类似的问题，但它的原因非常具体。我希望有人仍然会觉得它有用。
I use webp-heropolyfill for .webpimages support in Safari and it turns out, it's causing this problem on iOS devices. This is a known bugon their side, but I struggled forever to connect the dots.
我在 Safari 中使用webp-heropolyfill 来.webp支持图像，结果证明，它在 iOS 设备上导致了这个问题。这是他们方面的一个已知错误，但我一直在努力将这些点联系起来。
Unfortunately, I don't have a good solution for this. For now, I avoid using .webp images on pages with forms.
不幸的是，我对此没有很好的解决方案。现在，我避免在带有表单的页面上使用 .webp 图像。
