输入字段iOS Safari bug— ;Can';不要键入任何文本

输入字段iOS Safari bug— ;Can';不要键入任何文本,ios,css,forms,input,safari,Ios,Css,Forms,Input,Safari,我在页面上的表单中有一个自定义样式的文本输入 它在桌面、Android、iOS Chrome上的工作情况与预期一样,但有时在iOS Safari中,当在框中键入内容时,没有文本输入,即使字段有焦点且光标闪烁(不经常发生,但对于某些用户来说似乎总是发生) 表单代码非常标准(直接从Mailchimp复制) 以前有人见过这个吗 我正在使用flexbox,页面上有一个动画SVG,我知道它有时会导致iOS Safari中的异常行为…您的div标记应该是display block,并清除这两个标记 #mc_

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

它在桌面、Android、iOS Chrome上的工作情况与预期一样,但有时在iOS Safari中,当在框中键入内容时,没有文本输入,即使字段有焦点且光标闪烁(不经常发生,但对于某些用户来说似乎总是发生)

表单代码非常标准(直接从Mailchimp复制)

以前有人见过这个吗


我正在使用flexbox,页面上有一个动画SVG,我知道它有时会导致iOS Safari中的异常行为…

您的div标记应该是display block,并清除这两个标记

#mc_embed_signup_scroll { display:block; }

输入{-webkit用户选择:text;}

这将解决问题。

针对文本输入字段的特定于浏览器的css规则
有没有弄明白?我遇到了类似的问题。嘿@GarrettWills,我做了一次黑客攻击,将字段设置为“无”,然后在0秒超时后返回到“显示”。很糟糕,但它奏效了。哈哈,好吧,我来试试。谢谢为什么这能解决问题?你能解释一下吗?这样会更容易理解。谢谢默认情况下,在safari浏览器中,用户选择:文本“不起作用,这就是为什么我们需要提供特定于浏览器的webkit用户选择:文本属性。希望是这样clear@CodeF0xOn另外一个注意事项是,您可能还希望包括文本区域。因此,代码如下:
input,textarea{-webkit user select:text;}
不使用Mac Catalyst Mac Catalyst UPDATE:Dismiss必须排除键盘手势技巧
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;
}
#mc_embed_signup_scroll { display:block; }
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 */
}