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',來關注下一個輸入。