Question

我有一个基于Laravel的Web应用程序，我在Firefox的某些页面上出现了一个非常奇怪且特殊的问题。

如果我在页面上有一个表单，并且在该表单中有一个具有自动聚焦的字段，则在CSS之前加载HTML，并且在CSS加载之前，用户将页面视为纯文本。然后一切都恢复正常。

相关性听起来很牵强，但从表单字段中删除自动对焦可以解决网站上100％的问题。自动对焦是否需要浏览器在样式之前加载HTML？如何在不从我的所有表单中删除自动对焦的情况下解决此问题？

这是来自网站的示例表单字段：

<div class="form-group">
                    <label for="card-number" class="col-md-4 control-label">Card Number</label>

                    <div class="col-md-6">
                        <input id="card-number" type="text" class="form-control span4 card-number numbers-only" value="" required autofocus maxlength="16">
                        @if ($errors->has('card-number'))
                            <span class="help-block">
                                    <strong>{{ $errors->first('card-number') }}</strong>
                                </span>
                        @endif
                    </div>
                </div>

所有CSS文件都加载在页面的<head>中：

<!-- jQuery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<!-- Theme Styles -->
<link href="/assets/css/bootstrap.css" rel="stylesheet">
<link href="/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="/assets/css/styles.css" rel="stylesheet">

自动对焦表单字段会导致Firefox中的加载问题

0 个答案: