php - Laravel 登录 - 自动对焦的使用

Question

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

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

反之，如果密码输入失败，则应将焦点发送到密码字段。

我肯定可以在 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>

Answer 1

这就是我将在 Blade 的 View 部分使用 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