jQuery中页面加载表单中的自动焦点输入文本框

Question

I am using bootstrap validation in my form when i give autofocus in my form field it worked correctly but i need to focus the text box field which doesnot have value on page load ....

I tried this but not working for me

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

Html Code:

@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

In this I want to focus the cursor on next input field if the previous text box have value...Please help me how to achieve this?

Answer 1

this will focus any one field so you have to make one similar style in class for rest blank fields.

check below code and live snippet

$('.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> 

Answer 2

$(document).ready(function() {
   var ele = $('input').filter(':visible:first');
    if (ele.val() != "") {
       ele.parents('.form-group').next().find('.col-md-
            6').children().trigger('focus');
      }
  });

Please try this one.