台州做企业网站深圳网络推广代理
在 Web 开发中，为输入框添加撤销功能可以极大地提升用户体验，方便用户快速回滚到之前的输入状态。本文将通过一段简单的 HTML、CSS 和 JavaScript 代码，详细介绍如何实现输入框的撤销功能。
整体实现思路
利用 JavaScript 监听输入框的input事件，将每次输入变化后的值存储到一个数组中，构建输入历史记录；同时为撤销按钮绑定点击事件，当按钮被点击时，从历史记录数组中移除当前值，并将输入框恢复为上一个历史值。
效果图;
代码实现过程
1. HTML 结构搭建
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://unpkg.com/@tailwindcss/browser@4"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><title>撤销功能示例</title><style>/* 样式代码将在下文CSS部分详细说明 */</style>
</head><body><div class="container"><input type="text" id="inputField" placeholder="输入一些文本"><button id="undoButton">撤销</button></div><script>// JavaScript实现代码将在下文JavaScript部分详细说明</script>
</body></html>
上述代码构建了一个基础的 HTML 页面，包含一个用于输入文本的input框和一个 “撤销” 功能的button按钮，并为它们分别设置了唯一的id属性，方便后续通过 JavaScript 获取和操作。
2. CSS 样式设计
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f4f4f9;
}.container {background-color: #fff;padding: 2rem;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px;
}input {width: 100%;padding: 0.5rem;margin-bottom: 1rem;border: 1px solid #ccc;border-radius: 4px;
}button {padding: 0.5rem 1rem;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;
}button:hover {background-color: #0056b3;
}
这段 CSS 代码对页面进行了样式美化：
body样式设置了页面整体的字体、布局方式，让内容居中显示，并设置了背景颜色。.container类定义了输入框和按钮所在容器的样式，包括白色背景、内边距、圆角和阴影效果。input样式规定了输入框的尺寸、内边距、边框和圆角。button样式设置了按钮的背景颜色、文本颜色、边框样式，以及鼠标悬停时的背景颜色变化效果，增强交互体验。
3. JavaScript 功能实现
const inputField = document.getElementById('inputField');
const undoButton = document.getElementById('undoButton');
//存储输入框的历史值
const history = [];
//输入框的事件监听
inputField.addEventListener('input', () => {// 当前框中值放入数组history.push(inputField.value);
});
//按钮事件监听
undoButton.addEventListener('click', () => {// 如果数组长度大于1if (history.length > 1) {// 移除数组最后一个元素history.pop();// 并将输入框的值设置为数组的倒数第二个元素。inputField.value = history[history.length - 1];}
});
JavaScript 代码实现了核心的撤销功能：
- 首先通过
document.getElementById方法获取inputField输入框和undoButton按钮元素。 - 定义一个空数组
history，用于存储输入框的历史值。 - 为输入框添加
input事件监听器，每次输入内容发生变化时，将当前输入框的值添加到history数组中。 - 为撤销按钮添加
click事件监听器，当按钮被点击时，检查history数组长度是否大于 1（确保存在可撤销的历史记录），如果满足条件，使用pop方法移除数组中最新的记录，并将输入框的值设置为数组中倒数第二个元素，实现撤销效果。
功能效果与应用场景
通过上述代码，在浏览器中打开页面后，用户在输入框中输入内容时，每一次输入变化都会被记录；点击 “撤销” 按钮，输入框的内容会回退到上一次输入的状态。该功能适用于文本编辑器、搜索框等多种需要撤销操作的场景，能有效提升用户在数据输入过程中的便捷性和操作容错性。
以上就是实现输入框撤销功能的全部内容，通过简单的代码组合，就可以为 Web 应用增添实用的交互功能，希望本文对大家有所帮助！