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);
  });

});

我正在使用typeahead。对于在文本框中输入的任何值，自动完成列表如下所示

选择后显示如下

IMSI #

的情况也是如此

我怎样才能实现它？任何帮助将受到高度赞赏

Answer 1

如果您使用Yii2 ActiveForm，则需要使用 autofocus 和 tabindex inputOptions的属性如下所示。

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

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

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

1 个答案: