我在我的表单中使用bootstrap验证时，我在我的表单字段中自动聚焦它正常工作但我需要关注文本框字段，这对页面加载没有价值....
我试过这个但不适合我
$(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">×</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">×</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.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?" 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
在此我想将光标聚焦在下一个输入字段上，如果前一个文本框有值...请帮我解决这个问题？
答案 0 :(得分：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>
答案 1 :(得分：0)
$(document).ready(function() {
var ele = $('input').filter(':visible:first');
if (ele.val() != "") {
ele.parents('.form-group').next().find('.col-md-
6').children().trigger('focus');
}
});
请试试这个。