如何去除input标签的历史记录

要在用户输入内容到`<input>`框时将其保存为历史记录，并显示在特定的`div`元素内，可以按照下面的方式编写JavaScript代码。首先简单解释一下思路： 这个功能涉及到事件监听以及DOM操作。每当用户在一个文本框中键入某些信息并触发了某个条件（例如按下回车键或离开焦点），我们将获取该值然后创建一个新的HTML元素来表示这次的历史搜索项，并将它添加至页面上指定的位置。 下面是具体的实现步骤及完整示例代码: ### HTML部分保持不变 ```html <form action="#" method="get" class="form-input"> <input type="text" onkeyup="handleInput(this)" placeholder="输入关键字" autocomplete="off" name="query" id="input-Text" required /> <button class="input-icon-search" id="search"><i class='bx bx-search'></i></button> </form> <div class="icon-Time-Number icon-Active"> <div class="Time-number-flex"> <span class="Time" id="Time-count">00:00:00</span> <button type="submit" id="Time-close"><i class='bx bx-x'></i></button> </div> <div class="icon-History-list"> <div class="icon-history-flex" id="history-container"> <!-- 历史记录将会插入到这里 --> </div> </div> </div> ``` ### JavaScript 实现 接下来是JavaScript脚本部分，用于处理用户的键盘输入并将新条目加入到历史列表中。 ```javascript function handleInput(inputField) { // 获取当前输入框的内容. let inputValue = inputField.value.trim(); if (event.key === 'Enter') { // 检查是否按下了 Enter 键 if (!inputValue || inputValue.length <= 0) return; // 如果为空则不进行任何动作 const historyContainer = document.getElementById('history-container'); // 创建新的历史记录项目 var newItem = document.createElement("A"); newItem.href = "#"; newItem.target = "_self"; var newSpan = document.createElement("SPAN"); newSpan.textContent = inputValue; newItem.appendChild(newSpan); // 将新建好的<a>标签添加进容器里 historyContainer.insertBefore(newItem, historyContainer.firstChild); // 清空输入框准备接受下一次查询 inputField.value = ''; } } ``` 此段代码实现了您所描述的功能，在每次用户提交有效数据之后会在`.icon-history-flex` div 中生成相应的链接作为历史记录展示出来。 请注意这只是一个基本的例子；实际应用中还需要考虑更多细节比如限制最大存储量、去除重复选项等优化措施。