PHP-输入文本框自动对焦不起作用

Question

我有两个输入tex boxes 。 我希望它们在第一个文本框中输入内容时autofocus ，然后将自动对焦移向另一个。 我已经使用了此解决方案 ，但是它不适用于我。 我的看法在下面。

更新

<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

好的，我已经通过以下操作解决了这个问题。

在input标签中添加了autofocus属性。

<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#输入框。

Answer 2

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

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

您可以使用'tabindex' => '2',来关注下一个输入。