首页有一个输入框标记<input/>，当输入一个字符串时进行自动保存在列表，以此类推。利用（HTML5， CSS3， JavaScript），求代码

有一个输入框标记<input/>，当输入一个字符串时进行自动保存在列表，以此类推。利用（HTML5， CSS3， JavaScript），求代码

时间: 2024-10-25 22:14:21 浏览: 10

为了创建一个简单的文本输入框，并在用户输入时自动添加到列表中，你可以使用HTML、CSS和JavaScript结合来完成这个功能。下面是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Auto Save Input</title> <style> ul { list-style-type: none; padding: 0; margin: 0; } li { margin-bottom: 5px; } </style> </head> <body> <input type="text" id="inputField" placeholder="请输入内容..."> <button onclick="addToList()">保存</button> <ul id="listItems"></ul> <script> function addToList() { var input = document.getElementById('inputField').value; // 获取输入值 if (input) { // 如果有输入 var listItems = document.getElementById('listItems'); // 获取列表元素 var listItem = document.createElement('li'); // 创建新的列表项 listItem.textContent = input; // 将输入值设置为文字 listItems.appendChild(listItem); // 添加到列表 // 清空输入框 document.getElementById('inputField').value = ''; } else { alert("请输入内容再保存"); } } </script> </body> </html> ``` 在这个例子中： - 输入框`<input>`用于接收用户的输入，当用户点击“保存”按钮时，`addToList`函数会被触发。 - `addToList`函数获取输入框的值，如果非空，则创建一个新的`<li>`元素，将输入值设置为它的文本内容，然后将其添加到列表中。同时，清空输入框以允许继续输入。 - CSS样式用于美化列表和输入框。

阅读全文