大家好,我想编写一个代码来获取输入,然后将该信息添加到输入下的表中
th,
td {
border: 1px solid black;
background-color: white;
border-radius: 10px;
}
th {
background-color: rgb(255, 255, 46);
}
<table style="width:100%">
<tr>
<th style="width:50%;">x</th>
<th style="width:50%;">y</th>
</tr>
</table>
如果你知道我会很高兴我能做到这一点
要实现此目的,您将需要 Javascript 函数 keyDown、keyUp 或 keyPress(已弃用)。
使用 JS,您可以获取输入值,然后将其写入所需的输出元素,如下所示。
我在 HTML 中添加了两个输入元素,一个用于处理 keydown,另一个用于处理 keyup。
function myKeyUpFunction() {
let inputElem = document.getElementById('keyupInput')
let value = inputElem.value
let outputElem = document.getElementById('keyupOutput')
outputElem.innerText = value
}
function myKeyDownFunction() {
let inputElem = document.getElementById('keydownInput')
let value = inputElem.value
let outputElem = document.getElementById('keydownOutput')
outputElem.innerText = value
}
th,
td {
border: 1px solid black;
background-color: white;
border-radius: 10px;
padding: 0.5rem;
}
th {
background-color: rgb(255, 255, 46);
}
input {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}
<!DOCTYPE html>
<html>
<body>
<label for="keyupInput">Key up:</label>
<input type="text" id="keyupInput" onkeyup="myKeyUpFunction()" placeholder="Press me to write..." />
<label for="keydownInput">Key down:</label>
<input type="text" id="keydownInput" onkeydown="myKeyDownFunction()" placeholder="Press me to write..." />
<table style="width:100%">
<tr>
<th style="width:50%;">Keyup output</th>
<th style="width:50%;">KeyDown output</th>
</tr>
<tr>
<td id="keyupOutput"></td>
<td id="keydownOutput"></td>
</tr>
</table>
</body>
</html>