Php Laravel登录-使用自动对焦

我需要扩展我的登录表单，以便将自动聚焦发送到验证失败的字段

因此，如果用户名不正确，用户名字段应该清除，并将焦点发送给它

相反，如果密码失败，则应将焦点发送到密码字段

我当然可以在php中实现这一点，但不确定如何适应Laravel的原生表单元素来实现这一点

 <form method="post" autocomplete="off" role="form">
    <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
    <div class="form-group @if($errors->has('username')) has-error @endif">
        <label for="username">Username</label>
        {{ Form::text('username', null, array('placeholder' => 'Username', 'autofocus' => 'true', 'id' => 'username', 'class' => 'form-control required')) }}
        @if($errors->has('username')) <p class="help-block">{{{ $errors->first('username') }}}</p>@endif
    </div>
    <div class="form-group @if($errors->has('password')) has-error @endif">
        <label for="password">Password</label>
        {{ Form::password('password', array('placeholder' => 'Password', 'id' => 'password', 'class' => 'form-control required')) }}
        @if($errors->has('password')) <p class="help-block">{{{ $errors->first('password') }}}</p>@endif
    </div>
    {{ Form::submit('Login', array('class' => 'btn btn-primary', 'title' => 'Login')) }}
</form>

用户名
{{Form:：text（'username'，null，数组（'placeholder'=>'username'，'autofocus'=>'true'，'id'=>'username'，'class'=>'Form control required'））}
@if（$errors->has（'username'））
{{{{{$errors->first（'username'）}}}
@endif
密码
{{Form:：password（'password'，array（'placeholder'=>'password'，'id'=>'password'，'class'=>'Form control required'））}
@if（$errors->has（'password'））
{{{{{{$errors->first（'password'）}}}
@endif
{{Form:：submit（'Login'，array（'class'=>'btn btn primary'，'title'=>'Login'））}

我认为主要的问题是，您无法使用Laravel的本机表单帮助程序来实现这一点，并且无法让它正常工作。您可以扩展FormBuilder类并添加您自己的逻辑（在实例化时接受验证器/错误包，并自动将

autofocus

附加到它输出的第一个有错误的表单输入），但我认为您最好的选择是在视图中使用一些ifs来执行此操作（或者使用演示者保存所有视图逻辑）

从某种角度来看：

{{ Form::open(['autocomplete' => 'off', 'role' => 'form']) }}
    <div class="form-group @if ($errors->has('username')) has-error @endif">
        <label for="username">Username</label>
        <?php $attrs = ['placeholder' => 'Username', 'id' => 'username', 'class' => 'form-control required'];
        @if ($errors->has('username'))
            <?php $attrs[] = 'autofocus'; ?>
        @endif
        {{ Form::text('username', null, $attrs) }}
        @if ($errors->has('username'))
            <p class="help-block">{{{ $errors->first('username') }}}</p>
        @endif
    </div>
    <div class="form-group @if($errors->has('password')) has-error @endif">
        <label for="password">Password</label>
        <?php $attrs = ['placeholder' => 'Password', 'id' => 'password', 'class' => 'form-control required'];
        @if ($errors->has('password') && (! $errors->has('username')))
            <?php $attrs[] = 'autofocus'; ?>
        @endif
        {{ Form::password('password', $attrs) }}
        @if ($errors->has('password'))
            <p class="help-block">{{{ $errors->first('password') }}}</p>
        @endif
    </div>

    {{ Form::submit('Login', array('class' => 'btn btn-primary', 'title' => 'Login')) }}
{{ Form::close() }}

但这显然还是不太好

---

但是，扩展FormBuilder类似乎需要付出更多的努力——我想这取决于您计划在应用程序中使用的表单类型以及您必须处理的字段数量（因为上面的in-view方法越来越复杂，因为您必须添加所有

！$errors->has（'prev\u field'））

bits）。

这是我将在Blade的视图部分用javascript所做的。 我在模板上生成一个名为“脚本”的部分

我使用Jquery插件来选择元素

@section('scripts')

<script type="text/javascript">

$(document).ready(function(){

  @if($errors->first('user'))
    $("input[name='username']").focus();
  @elseif($errors->first('password'))
    $("input[name='password']").focus();
  @endif

});

</script>

@stop

@节（“脚本”）
$（文档）.ready（函数（）{
@如果（$errors->first（'user'））
$（“输入[name='username']）。焦点（）；
@elseif（$errors->first（'password'））
$（“输入[name='password']）；
@恩迪夫
});
@停止

自动聚焦不是laravels的工作，这是针对html和javascript；）@MaximilianRepl我想说的是，虽然你只能用javascript来实现，但@Suba的问题是如何在提交失败后使字段聚焦

。所以这是一个服务器端验证问题，它可能也与Laravel有关。Suba虽然这可能创建，但我不确定这是否被认为是一个好的实践。如果用户名和密码都不正确，您会怎么做？我个人更喜欢将旧的输入传递到表单（当然没有密码），并添加错误通知，这将导致用户更正它们。@thoöМааааа，不，这不是服务器端，因为如果您有错误，使用验证器，您需要使其可见。所以，如果你让它可见，你就可以去哪里；）@这是一个比我的答案更好的选择（我完全忘了提到JS会更好，d'oh）。这是一个很好的选择。非常感谢你的贡献
@section('scripts')

<script type="text/javascript">

$(document).ready(function(){

  @if($errors->first('user'))
    $("input[name='username']").focus();
  @elseif($errors->first('password'))
    $("input[name='password']").focus();
  @endif

});

</script>

@stop