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

Question

I am working on a project. You as a user are able to "add" input fields, however if you add too many input fields you will (of course) get a scrollbar.

It would be quite annoying to scroll all the way down to write something in an input field that's somewhere all the way down.

Here is a jsfiddle so you get a better idea of what I mean.

At first I thought maybe this could be done with autofocus, but (as far as I know) autofocus only focusses the input field.

I have been looking around and even read the API of javascript (in hopes of maybe encountering something similar would pop up), but I didn't find any.

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

I would like to know:
Is there a certain keyword that makes the autofocus (or in my case, the jump to the last added element) and if so, how should this be implemented? EDIT: my "exercise input field" should be focussed only, not the syllables... And when I click the add button to add a new block (in the fiddle click the big + sign next to the download button), it stops focussing the new added element. Therefore I don't exactly think this is a duplicate of the question asked, he only needs one autofocus and that's it. I need mine to be focussed on the new added input element.

Answer 1

Here is how you can do this.

Here's a complete solution:

 var cursorFocus = function(elem) { \n    var x = window.scrollX, y = window.scrollY; \n    elem.focus(); \n    window.scrollTo(x, y); \n}  
\ncursorFocus(document.getElementById('search-terms'));  

The principle is quite simple. Except of focusing you need to scroll to that element.

EDIT

For OP:

There are many elements with the same id, so don't say there are not.

This is not the way to go.

Anyway after you create input (on plus icon click) you should give it an unique id or class and then you can use the solution above using function like this

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

or

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

EDIT2

It was just qoutation, it wasn't my solution. But here is a quick fix.

Instead of

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

Do

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

Answer 2

Here is fiddle for what you want FIDDLE

You will notice that I have added the focus and select function in the click even

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

In the function

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

See how I have added the unique class name.

Hope this helps.