PHP的文本输入框自动对焦无法正常工作

Question

我有两个输入tex boxes。我希望在进入第一个文本框，然后自动对焦应朝另一个转移做他们是autofocus。我已经使用这个solution，但它不是为我工作。我的看法是波纹管。

更新

<div class="meter-to-sim-mapping-form">

<?php $form = ActiveForm::begin(['id'=>'simmapping-form','options' => ['enctype' => 'multipart/form-data']]); ?>

<?php  if($model->isNewRecord){?>
    <label class="control-label">Select Meter #</label><br />
    <input type="text" id="the-meter-id" class="form-control col-md-12"  value="<?=$model->meter_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_meters_container" ></div>
    <div style="clear: both;"></div>

    <label class="control-label">Select IMSI #</label><br />
    <input type="text" id="the-sim-id" class="form-control col-md-12" value="<?=$model->sim_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_imsi_container" ></div>
    <div style="clear: both;"></div>
<?php } ?>

<?= $form->field($model, 'imsi')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_number')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'operator_name')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'meter_msn')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_status')->dropDownList(\app\models\AccurateBase::simstatusArray())?>

<?= $form->field($model, 'historic')->textInput(['readonly' => 'readonly']) ?>

<div class="form-group">
    <a class="btn btn-default" onclick="window.history.back()" href="javascript:;"><i
                class="fa fa-close"></i>
        Cancel</a>
    <a class="<?= $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary' ?>" onclick="
      $('#simmapping-form').submit();" href="javascript:;">
        <?= $model->isNewRecord ? 'Create' : 'Update' ?></a>
</div>

<?php ActiveForm::end(); ?>

JS

$(document).ready(function() {
  var surveyReferences = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('imsi'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'survey',
    remote: {
      url: '$urlsim?q=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#the-sim-id').typeahead(null, {
    limit: 50,
    name: 'ref-numbers',
    display: 'imsi',
    source: surveyReferences,
    suggestion: function(data) {
      return '<p><strong>' + data.id + '</strong> – ' + data.imsi + '</p>';
    }
  });
  jQuery('#the-sim-id').on('typeahead:selected', function(e, datum) {
    $('#selected_imsi_container').html('');
    $('#metertosimmapping-imsi').val('');
    $('#metertosimmapping-sim_number').val('');
    $('#metertosimmapping-operator_name').val('');
    //$('#metertosimmapping-sim_status').val(datum.sim_status);
    $('#metertosimmapping-historic').val(datum.historic);
    var html = '<div class="selected-imsi"><input type="hidden" name="selected_imsi[]" value="' + datum.id + '" />' + datum.imsi + '<a onclick="$(this).closest(\'.selected-imsi\').remove()">X</a></div>';
    $('#selected_imsi_container').append(html);
    $('#metertosimmapping-imsi').append(datum.imsi);
    $('#the-sim-id').typeahead('val', '');
    $('#metertosimmapping-sim_number').val(datum.sim_number);
    $('#metertosimmapping-operator_name').val(datum.operator_name);
    //$('#metertosimmapping-sim_status').val(datum.sim_status);
    $('#metertosimmapping-historic').val(datum.historic);
  });


  // for meters see below ****************************************************

  var surveyReference = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('meter_msn'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'survey',
    remote: {
      url: '$urlmeters?q=%QUERY',
      wildcard: '%QUERY'
    }
  });
  $('#the-meter-id').typeahead(null, {
    limit: 50,
    name: 'ref-numbers',
    display: 'meter_msn',
    source: surveyReference,
    suggestion: function(data) {
      return '<p><strong>' + data.id + '</strong> – ' + data.meter_msn + '</p>';
    }
  });
  jQuery('#the-meter-id').on('typeahead:selected', function(e, datum) {
    $('#selected_meters_container').html('');
    $('#metertosimmapping-meter_serial').val('');
    var html = '<div class="selected-meter"><input type="hidden" name="selected_meters[]" value="' + datum.id + '" />' + datum.meter_msn + '<a onclick="$(this).closest(\'.selected_meters\').remove()">X</a></div>';
    $('#selected_meters_container').append(html);
    $('#metertosimmapping-meter_serial').append(datum.meter_msn);
    $('#the-meter-id').typeahead('val', '');
    // $('#metersinventorystore-historic').val(datum.historic);
  });

});

我使用的键盘缓冲。对于在文本框中输入的任何值，自动完成列表被视为低于

并选择后，显示如下图所示

同样是IMSI #情况

我怎样才能实现呢？任何帮助将不胜感激

Answer 1

如果您正在使用Yii2与ActiveForm所有你需要的是使用autofocus的tabindex和inputOptions财产像下面。

$form->field($model, 'location', [
 'inputOptions' =>
    [
      'autofocus' => 'autofocus',
      'tabindex' => '1',
    ]
])->textInput();

您可以使用'tabindex' => '2',为聚焦到下一个输入。

Answer 2

好吧，我有下面做事解决了这个问题。

加入autofocus标签的input属性。

<input type="text" id="the-meter-id" class="form-control col-md-12"  autofocus value="<?=$model->meter_id?>"/>

这将默认值，但把光标放在第一个文本框。

之后在javascript

 jQuery('#the-meter-id').on('typeahead:selected', function (e, datum) { 
      $('#selected_meters_container').html('');
      $('#metertosimmapping-meter_serial').val('');
      $('#the-sim-id').focus();
      .
      .
      .
      .
});

在选择计数量自动对焦将转向IMSI#输入框。