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

我认为主要问题是您将无法使用 Laravel 的本机表单助手来完成此操作并使其正常工作。您可以扩展 FormBuilder class 并添加您自己的逻辑（在实例化时接受 validator/errors 包并自动将 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() }}

这不是很漂亮，必须在其中放置 PHP 代码才能动态添加属性，您可以使用三元来更改这些属性：

{{ Form::password(
    'password',
    [
        'placeholder' => 'Password',
        'id'          => 'password',
        'class'       => 'form-control required',
        'autofocus'   => ($errors->has('password') && (! $errors->has('username')) ? 'autofocus' : null)
    ]
) }}

但这显然还不是很好。

但是，是的，扩展 FormBuilder class 似乎需要更多努力 - 我想这取决于您计划在应用程序中使用多少此类表单以及您必须处理多少字段（因为上面的视图中方法变得越来越复杂，因为您必须添加所有 ! $errors->has('prev_field') 位）。

Answer 2

这就是我将在 javascript 在 Blade 的视图部分中执行的操作。我在我的模板上生成了一个名为 'scripts' 的部分。

我正在使用 Jquery 插件到 select 元素。

@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

Laravel 登录 - 使用自动对焦

Laravel login - use of autofocus

php

laravel

laravel-4