在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>

我想知道：
是否有某个关键字使自动对焦（或者在我的情况下，跳转到最后添加的元素），如果是，应该如何实现？ 编辑：我的“运动输入字段”应该只关注，而不是音节...当我点击添加按钮添加一个新的块（在小提琴点击下载按钮旁边的大+符号），它停止聚焦新添加的元素。 因此，我并不认为这是问题的重复，他只需要一个自动对焦，就是这样。 我需要将我的注意力集中在新添加的输入元素上。

Answer 1

这是你如何做到这一点。

这是一个完整的解决方案：

  var cursorFocus = function（elem）{\n     var x = window.scrollX，y = window.scrollY;\n     elem.focus（）;\n     window.scrollTo（x，y）;\n } 
\n cursorFocus（的document.getElementById（ '搜索术语'））; 

原理很简单。 除了聚焦之外，您需要滚动到该元素。

编辑

对于OP：

有许多具有相同id的元素，所以不要说没有。

这不是要走的路。

无论如何，在你创建输入（加上图标点击）后你应该给它一个唯一的id或类，然后你可以使用上面的解决方案使用这样的功能

cursorFocus(document.getElementById('your_unique_id'));

要么

cursorFocus(document.getElementsByClassName('your_unique_classname')[0]);

EDIT2

这只是个问题，这不是我的解决方案。 但这是一个快速解决方案。

代替

var x = window.scrollX, y = window.scrollY;

做

var x = elem.scrollX, y = elem.getBoundingClientRect().top + window.scrollY;

Answer 2

这是你想要的FIDDLE的小提琴

你会注意到我已经在点击中添加了焦点和选择功能

$(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;
}

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

希望这可以帮助。