Я работаю над проектом. Вы, как пользователь, можете «добавлять» поля ввода, однако, если вы добавите слишком много полей ввода, вы, конечно, получите полосу прокрутки.
Было бы довольно неприятно прокручивать весь путь вниз, чтобы записать что-то в поле ввода, где-то внизу.
Вот jsfiddle , чтобы вы лучше поняли, о чем я.
Сначала я подумал, что, возможно, это можно сделать с помощью автофокуса, но (насколько мне известно) автофокусировка фокусирует только поле ввода.
Я осматривался и даже читал API javascript (в надежде, что, возможно, встретится что-то подобное, всплывет), но я не нашел ни одного.
$(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>
Я хотел бы знать:
Есть ли определенное ключевое слово, которое делает автофокус (или в моем случае, переход к последнему добавленному элементу) и, если да, как это должно быть реализовано?
РЕДАКТИРОВАТЬ: мое "поле ввода упражнения" должно быть только фокус, а не слоги ... И когда я нажимаю кнопку добавления, чтобы добавить новый блок (в скрипте нажмите большой знак + рядом с кнопкой загрузки), он перестает фокусироваться новый добавленный элемент. Поэтому я не думаю, что это дубликат задаваемого вопроса, ему нужен только один автофокус, и все. Мне нужно, чтобы мой фокусировался на новом добавленном элементе ввода.