jquery中页面加载时表单中的自动焦点输入文本框答案

【问题标题】：auto focus input text box in form on page load in jqueryjquery中页面加载时表单中的自动焦点输入文本框
【发布时间】：2017-04-28 09:13:12
【问题描述】：

当我在表单字段中提供自动对焦时，我在表单中使用引导验证，它可以正常工作，但我需要关注在页面加载时没有价值的文本框字段 ....

我试过了，但不适合我

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

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

【问题讨论】：

你试过HTML5 autofocus input-controls 的属性吗？像<input type="text" autofocus> 它在页面加载时给出focus
是的。但是当第一个字段中存在值时它不起作用，专注于下一个

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

这将聚焦任何一个字段，因此您必须在课堂上为其余空白字段创建一种类似的样式。

检查下面的代码并实时运行sn-p

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

【讨论】：

我正在使用引导验证器。我认为这导致了这个问题。它触发并突然消失鞋验证错误
这只会使 UI 集中，我认为它不会引起任何问题。试试看，让我知道它是否让程序很痛苦
它触发页面加载时有空值的字段。但它突然消失并显示验证错误
什么错误？能否请您创建一个小提琴，以便我们可以轻松理解

【解决方案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');
      }
  });

请试试这个。

【讨论】：

ele.next("input").focus();这是行不通的。如果
是的...现在它的焦点是输入框。但在几分之一秒内。此外，如果输入不存在，它应该关注第一个表单字段。这没有发生
您的其他表单字段是什么？
同样的问题。我走了，但在几秒钟之内，它就走了。我认为我们必须增加延迟。是这样吗？
是什么意思？光标消失？