javascript - jquery 页面加载时表单中的自动聚焦输入文本框

Question

当我在表单字段中进行自动对焦时，我在表单中使用 Bootstrap 验证，它工作正常，但我需要聚焦文本框字段，该字段在页面加载时没有值(value)....

我尝试过这个，但不适合我

$(document).ready(function(){
    if($(':input:visible:first').val() != "")
    {
        $(this).next("input").focus();
    }
});

HTML 代码:

@extends('layouts.app')

@section('content')
<div class="container">
    @if(Session::has('success'))
        <div class="alert alert-success" data-dismiss="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          {{ Session::get('success') }}
        </div>
    @endif
    <div class="alert alert-warning alert-dismissible" id="confrence-info" role="alert" style="display:none">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
      <div class="conferenceHTML"></div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading"><b>New Conference Request</b></div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-10">
                            {{ Form::open(['route'=>'addnew.store', 'class' => 'form-horizontal', 'data-toggle'=>'validator']) }}
                                <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
                                <input type="hidden" name="user_id" value="{{Cookie::get('uid')}}"/>
                                <div class="form-group">
                                    <label class="control-label col-md-6" for="email">Your Email<span> *</span></label>
                                    <div class="col-md-6">
                                        <input type="text"
                                        class="form-control" 
                                        pattern="^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,100}(?:\.[a-z]{6})?)$" 
                                        data-error="Please enter your email address" 
                                        data-pattern-error="Please enter valid email address" 
                                        id="email" 
                                        name="email"
                                        required
                                        value="{{ Cookie::get('uemail') }}" />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="conferencename">Conference Name<span> *</span></label>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control conference-name typeahead tt-query" data-error="Please enter the conference name" maxlength="350" id="conferencename" name="conferencename" required />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">  
                                    <label class="control-label col-md-6" for="firstname">Your First Name<span> *</span></label>
                                    <div class="col-md-6">
                                        <input type="text" maxlength="25" value="{{ Cookie::get('ufn') }}" id="firstname" data-error="Please enter your first name" class="form-control" name="firstname" required/>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="lastname">Your Last Name<span> *</span></label>
                                    <div class="col-md-6">
                                        <input type="text" maxlength="25" value="{{ Cookie::get('uln') }}" id="lastname" data-error="Please enter your last name" name="lastname" class="form-control" required/>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="conferenceurl">Conference Website<span> *</span></label>
                                    <div class="col-md-6">
                                        <input type="url" pattern="((http|https)://)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?" placeholder="http://www.nrg.com" data-error="Please enter in correct format eg: http://www.nrg.com" class="form-control" id="conferenceurl" name="conferenceurl" required />
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="description">Conference Description<span> *</span></label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" id="description" name="description" data-error="Please enter the description" rows="3" required></textarea>
                                        <div class="help-block with-errors"></div> 
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="industry">Industry Conference primarily applies to?<span> *</span></label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" maxlength="500" data-error="Please enter this field" id="industry" name="industry" cols="10" rows="2" required></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="business">Why is this conference relevant to the business?<span> *</span></label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" id="business" name="business" data-error="Please enter this field" maxlength="2000" rows="3" required></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="notes">Conference Notes</label>
                                    <div class="col-md-6">
                                        <textarea class="form-control" id="notes" name="notes" rows="4"></textarea>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="control-label col-md-6" for="frequency">Conference Frequency<span> *</span></label>
                                    <div class="col-md-6">
                                        <select class="form-control" id="frequency" name="frequency" data-error="Please select anyone of this fields" required="required">
                                            <option value="">Select</option>
                                            <option value="LOY">Less than once a Year</option>
                                            <option value="OAY">Once a Year</option>
                                            <option value="MTY">Multiple times a Year</option>
                                        </select>
                                        <div class="help-block with-errors"></div>
                                    </div>
                                </div>

                        <div class="form-group text-center pull-right">
                            <div class="col-md-12">
                                <a href="{{URL::previous()}}" class="btn btn-default">Cancel</a>
                                {{ Form::submit('Submit',['class' => 'btn btn-success']) }}
                            </div>
                            {{ Form::close() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var ele = $('input').filter(':visible:first');
    if(ele.val() != "")
    {
        ele.parents('.form-group').next().find('input').trigger('focus');
    }
});
</script>

@endsection

在此，如果前一个文本框具有值，我想将光标聚焦在下一个输入字段上...请帮助我如何实现此目的？

Answer 1

这将集中任何一个字段，因此您必须在类里面为其余空白字段创建一种类似的样式。

检查下面的代码和实时片段

$('.main input[type="text"]').each(function(i){
          var chec = $('.main input[type="text"]').eq(i).val();
          if(chec==""){
            $(this).addClass("custom-outline");
            $(this).focus();
          }
        })

$(document).ready(function(){
  
    $('.main input[type="text"]').each(function(i){
      var chec = $('.main input[type="text"]').eq(i).val();
      if(chec==""){
        $(this).addClass("custom-outline");
        $(this).focus();
      }
    })
   
});

.custom-outline {
    outline: #438aff;
    outline-width: thin;
    outline-style: solid
}
.custom-outline:focus {
    outline: #438aff;
    outline-width: thin;
    outline-style: solid;
    padding: 3px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="main">
 <input type="text" value="Something here">
 <input type="text">
 <input type="text">
 <input type="text" value="">
 <input type="text" value="ok">
 <input type="text" value="">
</div>