Question

我创建了一个使用autofocus="autofocus"的联系表单。我注意到一些奇怪的事情，当一个表单有自动对焦时，我的导航过渡就会被激活。我只在Firefox中注意到它。有什么我做错了或者它只是firefox的行为（bug）？

表格：

<form method="post" action="" id="contactForm">
    <textarea id="contactF" name="message" tabindex="1" placeholder="Type your message here" required="required"></textarea>
    <input type="submit" id="contactS" name="submit" value="Send" tabindex="3" />
    Your Name: <input type="text" id="contactN" name="name" tabindex="2" placeholder="Type your Name" required="required" />
</form>

导航CSS：

#menu ul li {
    width: 251px;
    text-align:center;
    display: inline-block;
    background: #ddd;
    height: 30px;
    line-height: 30px;
    box-shadow: 126px 0 0px 0px #000 inset, -126px 0 0px 0px #000 inset;
    -webkit-transition: all 400ms ease-in;
    -moz-transition: all 400ms ease-in;
    -o-transition: all 400ms ease-in;
    transition: all 400ms ease-in;
}

}

#menu ul li:hover, #menu li.active {
    box-shadow: 0 0 0px 0px #000 inset, -0 0 0px 0px #000 inset;
}

#menu ul a:link,#menu  ul a:visited {
    display: block;
    font-size: 17px;
    width: 251px;
    text-decoration: none;
    font-weight: bold;
    color: #6DB7B5;
    margin:0 auto;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}

#menu ul a:hover, #menu li.active a {
    color: #FF6181;
}

Answer 1

好的新尝试，经过一些阅读后我发现这可能是转换的一般问题。如果发生这种情况，只有一个修复。

你必须在你的身体上添加一个课程

<body class="preload">

这个课程根本没有过渡

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

最后你必须用一点js删除preload类。

$("window").load(function() {
  $("body").removeClass("preload");
});

希望这有帮助，反馈会很好

为什么过渡会启动自动对焦？

1 个答案: