如何把html输入到网格在其适当的地方自动或手动通过js?

Question

在网格列中，当用户输入数据时，假设有20个不同数据类型的html输入。输入grid-container，其中div元素位于正确的输出位置。

Answer 1

我想这就是你的意思…

要在用户实时输入内容时在网格内的任何位置显示元素，您可以使用以下方法:

1 -直接在HTML中:

你可以使用"oninput"属性

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

…与每个输入的值一起:

假设我们有:(USER INPUT)

<input type="text" 
id="userName" 
<!-- ADD THIS -->
oninput="nameOutput.value = userName.value"/>

which corresponds to : (USER OUTPUT)
<input id="nameOutput">

…请确保使用id来关联两个输入字段。

这样你就可以获得实时的输入值…

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>

---

---

• 一次显示所有内容:

在这种情况下，如果您喜欢，可以使用某种表单和提交按钮输入值…

然后你可以使用一个数组来存储这些值，然后当用户使用你喜欢的任何逻辑单击按钮时，将它们一起显示…你也可以使用这些属性。

我希望这对你有帮助。