输入栏iOS Safari错误-无法输入任何文本 [英] Input field iOS Safari bug — Can't type in any text

问题描述

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

I have a custom styled text input in a form on a page.

它可以在桌面，Android，iOS Chrome上正常运行，但有时在iOS Safari上可以正常工作在框内键入内容，即使该字段已聚焦并且光标闪烁，也不会输入任何文本（这种情况很少发生，但对于某些用户而言似乎一直都在发生）。

It's working as expected on desktop, Android, iOS Chrome, but sometimes in iOS Safari when typing into the box, no text enters, even though the field has focus and the cursor is flashing (doesn't happen very often, but seems to happen all the time for some users).

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

The form code is very standard, (copied straight from 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中导致异常行为...

I'm using flexbox and there is an animated SVG on the page, which I know sometimes causes unusual behavior in iOS Safari...

推荐答案

输入{-webkit-user-select：text;}

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

这将解决问题。

这篇关于输入栏iOS Safari错误-无法输入任何文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！