javascript - 在javascript中自动跳转，这可能吗？

Question

我正在做一个项目。作为用户，您可以“添加”输入字段，但是如果您添加太多输入字段，您(当然)会得到一个滚动条。

一直向下滚动以在一直向下某处的输入字段中写东西会很烦人。

这是一个jsfiddle这样您就可以更好地理解我的意思。

起初我想也许这可以通过自动对焦来完成，但是(据我所知)自动对焦只会聚焦输入字段。

我一直在四处寻找，甚至阅读了 javascript 的 API(希望可能会遇到类似的东西弹出)，但我没有找到任何东西。

$(document).ready(function() {
  var id = 0;
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-success',
    'id': 'addOpdracht'
  }).on('click', function() {
    $('form').append(getExerciseBlock(id));
    id++;
  }).html('<i class="fa fa-plus fa-2x"></i>');

  $('form').append(addOpdracht);
  $('form').append(getExerciseTitle());
})



function getAddBtn(target, i) {
  var addBtn = $('<a/>', {
    'class': 'btn btn-primary',
    'id': 'addBtn'
  }).on('click', function() {
    $(target).append(getWordPartInput(i));
  }).html('<i class="fa fa-plus"></i>');
  console.log(target);
  return addBtn;
}

function getRemoveBtn(target, i) {
  var RemoveBtn = $('<a/>', {
    'class': 'btn btn-danger'
  }).on('click', function() {
    let syllableInputs = $(this).parent().children("input.syllable");
    syllableInputs[syllableInputs.length - 1].remove(target);
  }).html('<i class="fa fa-minus"></i>');

  return RemoveBtn;
}



function getExerciseBlock(i) {
  var eBlock = $('<div/>', {
    'id': i,
    'class': 'col-md-12 eBlock'
  });

  $(eBlock).append(getAudioBtn(i), getWordInput(i), getWordPartInput(i), getWordPartInput(i), getRemoveBtn(i), getAddBtn(eBlock, i));

  return eBlock;
}


function getAudioBtn(id, cValue) {
  cValue = cValue || '';
  var audioBtn = $('<a/>', {
    'class': 'btn btn-primary'
  }).html('<i class="fa fa-volume-up"></i>');
  return audioBtn;
}


function getWordInput(id, cValue) {
  cValue = cValue || '';
  var wInput = $('<input/>', {
    'class': 'exerciseGetWordInput form-group form-control',
    'type': 'text',
    'name': 'question_takeAudio_exerciseWord[]',
    'placeholder': 'Exercise',
    'id': 'exerciseGetWordInput'
    //'value': ' + response.main_object.exercises[i].exerciseGetWordInput + '
  })
  return wInput;
}


function getWordPartInput(id, cValue) {
  cValue = cValue || '';
  var wpInput = $('<input/>', {
    'class': 'form-group form-control syllable',
    'type': 'text',
    'value': cValue,
    'placeholder': 'Syllables',
    'id': 'SyllablesGetWordPartInput'
  });
  return wpInput;
}

function getExerciseTitle() {
  var exerciseTitle = $('<input/>', {
    'class': 'getExerciseTitle form-group form-control required',
    'type': 'text',
    'name': 'getExerciseTitle',
    'id': 'getExerciseTitle',
    'placeholder': 'Exercise title',
    'required': true
  });

  return exerciseTitle;
}


function getResetInputs() {
  location.reload();
}

<div class="container">
  <div class="panel-group">
    <div class="panel panel-default">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <div class="row">
            <h2 id="exerciseTitleCMS" class="col-md-8 col-sm-7 col-xs-6">Content Managment System</h2>
            <div class="col-md-offset-2 col-md-2">
              <h2>
                <select class="languageSelector form-control required" id="languageSelector"></select>
              </h2>
            </div>
          </div>
        </div>
        <!-- end of panel-heading -->
        <div class="panel-body">
          <div class="jumbotron" id="mainList">
            <form id='my_form' class="container-fluid" action="#" method="POST" required>
              <button id='resetInputs' type='button' onclick='getResetInputs()' class='btn btn-danger fa fa-refresh fa-2x resetInputs'></button>
              <button type='submit' id='saveBtn' class='btn btn-info fa fa-download fa-2x saveBtn' required></button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想知道:
是否有某个关键字使自动对焦(或者在我的情况下，跳转到最后添加的元素)，如果是这样，应该如何实现？ 编辑:我的“练习输入字段”应该只关注，而不是音节......当我点击添加按钮添加一个新 block 时(在 fiddle 中点击下载按钮旁边的大+号)，它停止关注新添加的元素。因此，我不完全认为这是所问问题的重复，他只需要一个自动对焦，仅此而已。我需要我的注意力集中在新添加的输入元素上。

Answer 1

这里有你想要的 fiddle FIDDLE

你会注意到我在click even中添加了focus和select功能

$(document).ready(function() {
  var id = 0;
  var addOpdracht = $('<a/>', {
    'class': 'btn btn-success',
    'id': 'addOpdracht'
  }).on('click', function() {
    $('form').append(getExerciseBlock(id));
    $(".exerciseGetWordInput_" + id).focus().select(); /// I also changed the class a little to make it unique
    id++;
  }).html('<i class="fa fa-plus fa-2x"></i>');

  $('form').append(addOpdracht);
  $('form').append(getExerciseTitle());
});

在函数中

function getWordInput(id, cValue) {
  cValue = cValue || '';
  var wInput = $('<input/>', {
    'class': 'exerciseGetWordInput_' + id + ' form-group form-control',  // changed the class name here
    'type': 'text',
    'name': 'question_takeAudio_exerciseWord[]',
    'placeholder': 'Exercise',
    'id': 'exerciseGetWordInput'
  })
  return wInput;
}

看看我是如何添加唯一类名的。

希望这对您有所帮助。