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

Here就是这样做的。

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

var cursorFocus = function(elem) {
    var x = window.scrollX, y = window.scrollY;
    elem.focus();
    window.scrollTo(x, y);
}

cursorFocus(document.getElementById('search-terms'));

原则很简单。除焦点外，您需要滚动到该元素。

修改

对于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

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

std::pair<key_type, mapped_type>

在功能

中

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

了解我如何添加唯一的类名。

希望这有帮助。

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

2 个答案: