当前位置：首页 > news >正文

JavaScript 实现输入框的撤销功能

news 来源：原创 2025/5/6 7:16:16

在 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方法移除数组中最新的记录，并将输入框的值设置为数组中倒数第二个元素，实现撤销效果。