输入字段 iOS Safari 错误 — 无法输入任何文本

Question

我在页面上的表单中有一个自定义样式的文本输入。

它在桌面、Android、iOS Chrome 上按预期工作，但有时在 iOS Safari 中，当在框中输入内容时，即使该字段具有焦点且光标闪烁，也不会输入任何文本（这种情况并不经常发生，但似乎对于某些用户来说，这种情况一直发生）。

表单代码非常标准，（直接从Mailchimp复制）

<form action="[mailchimp subscribe url]" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                <div id="mc_embed_signup_scroll">
                    <input type="email" value="" placeholder="Email" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
                    <input type="submit" value="REQUEST INVITE" name="subscribe" id="mc-embedded-subscribe" class="button">
                    <div id="mc_embed_signup_scroll">
                    <div style="position: absolute; left: -5000px;"><input type="text" name="b_e563c0e6b5344e25de276c14f_5e5c7a08a6" tabindex="-1" value=""></div>
                </div>
            </form>

自定义 CSS 是：

input.email, .button {
    outline: none;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    width: 240px;
    padding: 12px 16px;
    background-color: rgba(255,255,255,0.1);
    margin: 0;
    vertical-align: middle;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-family: 'Calibre Medium';
    color: white !important;
    opacity: 1;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}


::placeholder, ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-placeholder, input.email, .button {
    color: white !important;
    transition: all 0.15s;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -ms-transition: all 0.15s;
    -o-transition: all 0.15s;
}

其他人以前见过这个吗？

我正在使用 Flexbox，页面上有一个动画 SVG，我知道这有时会导致 iOS Safari 中出现异常行为...

Answer 1

这将解决问题：

input, textarea {
    -webkit-user-select: text;
}

默认情况下，在 Safari 浏览器中，

user-select:text

不起作用。我们需要提供特定于浏览器的

-webkit-user-select:text

属性。

https://caniuse.com/mdn-css_properties_user-select

Answer 2

文本输入字段的浏览器特定 CSS 规则

input {
    -webkit-user-select: text; /* Chrome, Opera, Safari */
    -moz-user-select: text; /* Firefox 2+ */
    -ms-user-select: text; /* IE 10+ */
    user-select: text; /* Standard syntax */
}

Answer 3

您的 div 标签应该是显示块并清除两者。

#mc_embed_signup_scroll { display:block; }

Answer 4

仅供参考，它应该应用于

textarea

元素以及基本

input

元素，因为我发现

textarea

有同样的问题：

例如

input, textarea {
    -webkit-user-select: text;
}