Jquery addClass 函数在 Firefox 中不起作用答案

【问题标题】：Jquery addClass function not working in FirefoxJquery addClass 函数在 Firefox 中不起作用
【发布时间】：2020-03-09 16:55:18
【问题描述】：

我的 jQuery addClass() 有一个问题，它在 firefox 中不起作用，这意味着该类没有添加到当前元素。以下在 Chrome 和 Safari 中运行（未在 IE 上测试）。

这里是 CSS：

$(document).ready(function(){
				$(".placeholder").click(function(){
					$(this).addClass("placeholder-small");
					$(this).prev("input").focus();
				});
				$("input").on("focus",function(){
					$(this).nextAll(".placeholder").first().addClass("placeholder-small");
				});
			});

* {box-sizing:border-box;outline:none;-webkit-appearance:none}
			html, body {padding:0;margin:0;background-color:#131419;color:#fff;font-family:"DIN", arial;font-size:14px;letter-spacing:0.15em;font-weight:300}
			input[type="text"], input[type="email"], input[type=number], input[type="password"] {max-width:250px;width:100%;background-color:transparent;border-radius:0;border:0;border-bottom:1px solid #b6b6b8;color:#fff;font-family:"DIN",arial;font-size:inherit;padding:10px 8px;margin:10px 0;z-index:1}
			.required {position:relative}
			.required:after {position:absolute;top:0;right:0;content:"*";color:#ff0000;z-index:9}
			.placeholder {position:absolute;top:0;left:0;transition:all .2s;z-index:0}
			textarea ~ .placeholder {top:-135px}
			.placeholder-small, input:-webkit-autofill ~ .placeholder {transform:translateY(-125%);-moz-transform: translateY(-125%);font-size:0.85em;color:#616777}

<form method="post">
		<div style="padding:50px"><span class="required"><input type="text" name="firstname" value="" pattern=".{1,}" required minlength="1" maxlength="255" /><div class="placeholder">Prénom</div></span></div>
		</form>
		<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
		<script>
			$(document).ready(function(){
				$(".placeholder").click(function(){
					$(this).addClass("placeholder-small");
					$(this).prev("input").focus();
				});
				$("input").on("focus",function(){
					$(this).nextAll(".placeholder").first().addClass("placeholder-small");
				});
			});
		</script>

如果需要，您可以在此页面上实时查看： https://www.goldenkeyz.com/fr/signup/

【问题讨论】：

请添加您的 HTML 并提供minimal reproducible example。
@Barmar，已编辑，谢谢
您能否在问题中显示实际的 HTML，而不是生成它的 PHP，以便 sn-p 正确执行？
很奇怪。 Debugger 选项卡显示 this 是 div.placeholder.placeholder-small，但添加的类未显示在 Elements 选项卡中，并且未应用该类的 CSS。

标签： jquery css firefox

【解决方案1】：

这是你的问题：

.placeholder-small, input:-webkit-autofill ~ .placeholder { ...

Webkit 特定的声明导致 Firefox 上的解析失败，这是理所当然的。如果解析器遇到它无法识别的内容，它将忽略整个代码块：

选择器由直到（但不包括）第一个左花括号 ({)。选择器总是与 {}-堵塞。当用户代理无法解析选择器时（即，它不是有效的 CSS3)，它也必须忽略 {} 块。

如果您删除 webkit 部分，或将其分离到它自己的语句中，代码将按预期工作：

.placeholder-small {
    transform: translateY(-125%);
    font-size: 0.85em;
    color: #616777;
}

input:-webkit-autofill ~ .placeholder {
    transform: translateY(-125%);
    font-size: 0.85em;
    color: #616777;
}

请注意，您不需要使用-moz-transform，从 2012 年的第 16 版开始，普通转换就足够了。

【讨论】：