Question

如果我像这样使用jQuery focus()方法似乎不起作用：

$('#<same_id_input>').focus();

单击标签时，我调用一个函数来显示一个带有输入的div，然后我调用focus()元素上的<input>，但它不起作用。

我正在使用： Boostrap 3.3.7 + jQuery 3.1.1

$('#optBusqueda .btn').click(function(){
    var radioSeleccionado=$(this).find(':radio').first();
    if(radioSeleccionado && radioSeleccionado.length>0){
        $('#divBuscarOcr').css("display","none");
        $('#divBuscarNombre').css("display","none");
        $('#divBuscarRfc').css("display","none");
        $('#divBuscarCurp').css("display","none");
        var idRadioSeleccionado=radioSeleccionado.attr('id');
        switch(idRadioSeleccionado){
            case "radioBuscarOcr":
                $('#divBuscarOcr').css("display","block");
                $('#txtBuscarOcr').focus();
                break;
            case "radioBuscarNombre":
                $('#divBuscarNombre').css("display","block");
                $('#divBuscarNombre').focus();
                break;
            case "radioBuscarRfc":
                $('#divBuscarRfc').css("display","block");
                $('#divBuscarRfc').focus();
                break;
            case "radioBuscarCurp":
                $('#divBuscarCurp').css("display","block");
                $('#divBuscarCurp').focus();
                break;
        }
        
    }
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="panel-group" id="accordion" role="tablist"
    aria-multiselectable="true">
    <div id="panelBuscar" class="panel panel-default">
      <div class="panel-heading clearfix" role="tab" id="headingOne">
        <!-- data-toggle="collapse" data-target="#collapseOne" -->
        <h4 class="panel-title pull-left" style="padding-top: 7.5px;">
          <a role="button" data-toggle="collapse" data-parent="#accordion"
            href="#collapseOne" aria-expanded="false"
            aria-controls="collapseOne"> <i
            class="fa fa-lg fa-fw fa-search"></i> BUSCAR
          </a>
        </h4>
        <div id="optBusqueda" class="btn-group pull-right"
          data-toggle="buttons">
          <label class="btn btn-primary active" data-toggle="tooltip" title="Buscar por OCR"> <input
            name="options" id="radioBuscarOcr" type="radio" checked="true" />
            OCR
          </label> <label class="btn btn-primary"  data-toggle="tooltip" title="Buscar por Nombre"> <input name="options"
            id="radioBuscarNombre" type="radio" /> NOMBRE
          </label> <label class="btn btn-primary"  data-toggle="tooltip" title="Buscar por RFC"> <input name="options"
            id="radioBuscarRfc" type="radio" /> RFC
          </label> <label class="btn btn-primary"  data-toggle="tooltip" title="Buscar por CURP"> <input name="options"
            id="radioBuscarCurp" type="radio" /> CURP
          </label>
        </div>
        <div class="pull-right" id="divMunicipioBuscar">
          <div class="form-group" style="margin-bottom: 0">
            <select id="txtNoMunicipioBuscar" name="txtNoMunicipioBuscar"
              th:attr="data-url=@{/municipios/get},data-emptyText='Seleccione municipio'"
              class="form-control populateSelect">
              <option value="">Seleccione municipio...</option>
            </select>
          </div>
        </div>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in"
        role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-4 " id="divBuscarOcr">
              <div class="form-group">
                <input id="txtBuscarOcr" name="txtBuscarOcr" type="text"
                  class="form-control" placeholder="Ocr" />
              </div>
            </div>
            <div id="divBuscarNombre" style="display: none;">
              <div class="col-sm-3">
                <div class="form-group">
                  <input id="txtNombreBuscar" name="txtNombreBuscar" type="text"
                    class="form-control" placeholder="Nombre" />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="form-group">
                  <input id="txtApPaternoBuscar" name="txtApPaternoBuscar"
                    type="text" class="form-control" placeholder="Apellido Pat." />
                </div>
              </div>
              <div class="col-sm-3">
                <div class="form-group">
                  <input id="txtApMaternoBuscar" name="txtApMaternoBuscar"
                    type="text" class="form-control" placeholder="Apellido Mat." />
                </div>
              </div>
            </div>
            <div id="divBuscarRfc" style="display: none;">
              <div class="col-sm-4 ">
                <div class="form-group">
                  <input id="txtBuscarRfc" name="txtBuscarRfc" type="text"
                    class="form-control" placeholder="Rfc" />
                </div>
              </div>
            </div>
            <div id="divBuscarCurp" style="display: none;">
              <div class="col-sm-4 ">
                <div class="form-group">
                  <input id="txtBuscarCurp" name="txtBuscarCurp" type="text"
                    class="form-control" placeholder="Curp" />
                </div>
              </div>
            </div>
            <a id="btnBuscar" class="btn btn-default"
              onclick="busquedaCiudadano(this)"><i
              class="fa fa-lg fa-search"></i> Buscar</a>
          </div>
          <div id="divResultados"></div>
        </div>
      </div>
    </div>
  </div>

这是我在JSFiddle上的原始示例。

Answer 1

这似乎是由于使用Twitter Bootstrap切换按钮造成的。他们可能会在自己的功能中调用focus()，这会混淆你在元素上放置的focus()。

您可以在结尾处拨打event.stopPropagation()，但这会完全阻止传播的事件发生，这将导致切换按钮不显示为已选中。

您可以通过自己设置所选状态的样式来解决这个问题：

$('.btn').on('click', function(){
  $('#InputToFocus').focus();
  $(this).parent('.btn-group').find('.btn').removeClass('active');
  $(this).addClass('active');
  return false; // Equivalent to preventDefault/stopPropagation
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label for="radio1" class="btn btn-primary">
    <input type="radio" id="radio1" name="radio" />
    Radio 1
  </label>
  <label for="radio2" class="btn btn-primary">
    <input type="radio" id="radio2" name="radio" checked />
    Radio 2
  </label>
</div>

<input id="InputToFocus" type="text">

正如您所看到的，这使得能够专注于元素并正确地对元素进行样式化，尽管可能会产生其他后果。

另一种方法是在处理事件后调用您的处理程序。最简单的方法是使用setTimeout()。

$('.btn').on('click', function(){
  setTimeout(function() { // Hack to make sure the focus is called after the event has been handled
    $('#InputToFocus').focus();
  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group" data-toggle="buttons">
  <label for="radio1" class="btn btn-primary">
    <input type="radio" id="radio1" name="radio" />
    Radio 1
  </label>
  <label for="radio2" class="btn btn-primary">
    <input type="radio" id="radio2" name="radio" checked />
    Radio 2
  </label>
</div>

<input id="InputToFocus" type="text">

jQuery.focus（）函数不起作用

1 个答案: