Как разместить html-входы в сетке в нужном месте автоматически или вручную через js?

В столбцы сетки, скажем, 20 html-входов разных типов данных по мере того, как пользователь вводит данные. Произнесите контейнер сетки с элементами div в правильном месте для вывода.

Решение проблемы

Я думаю, это то, что вы имеете в виду...

Чтобы отображать элементы в любом месте внутри сетки, когда пользователь что-то вводит в режиме реального времени, вы можете использовать этот подход:

1 - Непосредственно в HTML:

Вы можете использовать свойство oninput объекта GlobalEventHandlers.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput

...вместе со значением каждого входа:

Допустим, у нас есть: (ПОЛЬЗОВАТЕЛЬСКИЙ ВВОД)

<input type="text"
id="userName"
<!-- ADD THIS -->
oninput="nameOutput.value = userName.value"/>
which corresponds to: (USER OUTPUT)
<input id="nameOutput">


... убедитесь, что вы используете идентификаторы для связи обоих полей ввода.

таким образом вы получаете просто значение ввода в режиме реального времени...

2 - Использование функции JS:

то, если вы назначите функцию JavaScript для «oninput», вы можете использовать:

** innerHTML: изменить содержимое

и

** classList.add(): чтобы оформить вывод так, как вам нравится

>>> here is where you can place any element inside a new position on a grid


Итак, сначала вы создаете класс, описывающий эту новую позицию или что угодно в CSS:

допустим, у нас есть сетка 20x20, и этот элемент был расположен в первом столбце и первой строке:

CSS

.showNameOutput {
grid-column: 5/6;
grid-row: 1/2;
background-color: blue; /* or whatever */
}


это меняет свое положение в сетке

а затем вы можете добавить этот класс к ранее выбранному элементу

JS

const nameOutput = document.querySelector('.nameOutput'); // the the output HTML element has this class
function myFunction() {
nameOutput.classList.add('showNameOutput'); // we're adding new properties to that element
}


функция будет выполняться всякий раз, когда пользователь вводит что-либо на входе, поэтому она «перемещает» элемент вывода.

.... см. пример ниже, это может помочь... Я только что добавил пару вещей:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_oninput

сначала вы создаете класс, который изменит некоторые свойства CSS:

<style>
.change {
color: red;
}
</style>
<p>Write something in the text field to trigger a function.</p>


затем вы назначаете функцию oninput:

<input type="text" id="myInput" oninput="myFunction()">
<p id="demo"></p>


и создайте функцию, в которой вы используете этот класс:

<script>
function myFunction() {
//extract the value from the DOM input:
var x = document.getElementById("myInput").value;
// use of innerHTML:
document.getElementById("demo").innerHTML = "You wrote: " + x;
// use of classList.add('yourClass') to make CSS changes:
element.classList.add('change'); // in this case we just change the color as you can see
}
</script>


Отображение всего сразу:

В этом случае значения могут быть введены с помощью какой-либо формы и кнопки отправки, если хотите...

Затем вы можете использовать массив для хранения этих значений, а затем отображать их все сразу, когда пользователь нажимает кнопку, используя любую логику, которую вы предпочитаете... вы также можете использовать эти свойства.

Надеюсь, это поможет...