Question

我正在尝试使用HTML文本框创建一个简单的待办事项列表项目，在其中键入任务并在屏幕上显示该任务，但是我不知道如何记录某人的键入内容才能显示在屏幕上。

我曾经考虑过将信息记录在数组中，但是，我仍然不知道如何实际记录文本框中键入的内容。

<div id="newList">
  <input type="text" placeholder="Enter your task here" id="task1"/>
  <div id="addBut"></div>
  <div id="item"></div>
</div>

Answer 1

如果您只想登录到控制台：

    let input = Document.getElementById("task1");
    input.addEventListener("keydown",(e) =>{
      e.preventDefault()
      console.log(e.currentTarget.value)
    });

如果要在屏幕上显示：

    let input = Document.getElementById("task1");
    let div = Document.getElementById("item");
    input.addEventListener("submit", (e) => {
        div.innerHTML(e.currentTarget.value)
    })

This对Vanilla JS有好处。

Answer 2

您可以在输入中使用onkeyup功能。

function logChanges(id){
	var x = document.getElementById(id).value;
	console.log(x)
}

<div id="newList">
	<input type="text" placeholder="Enter your task here" id="task1" onkeyup="logChanges('task1')"/>
	<div id="addBut"></div>
	<div id="item"></div>
</div>

Answer 3

您是否有与此html一起使用的javascript文件？

您至少需要在hmtl文件中添加一个<script>标记才能编写javascript。

但是，一旦遇到这种情况，您可以尝试将eventListener添加到输入字段，并观看其击键。（请参阅https://developer.mozilla.org/en-US/docs/Web/Events/keydown）

ex /

var input = document.getElementById('task1'); //grab your input element

input.addEventListener('keydown', (event) => { //attached a function to the 'keydown' event which will allow you to change how their keystrokes are handled


    switch(event.keyCode){
        case 13: //they pressed enter
            alert(event.target.innerText); // with the contents of the input
        default:
            break;
    }
})

Answer 4

如果要在按下按钮时显示它，如下面的代码所示：

function showTextInLog() {
    var task1 = document.getElementById('task1');
    console.log(task1.value);
}

<div id="newList">
  <input type="text" placeholder="Enter your task here" id="task1"/>
  <div id="addBut"></div>
  <div id="item"></div>
  <input type="button" value="submit" onclick="showTextInLog();" />
</div>

如何使用JavaScript记录人们在文本框中键入的内容？

4 个答案: