JavaScript 实现输入框的撤销功能

在 Web 开发中，为输入框添加撤销功能可以极大地提升用户体验，方便用户快速回滚到之前的输入状态。本文将通过一段简单的 HTML、CSS 和 JavaScript 代码，详细介绍如何实现输入框的撤销功能。

整体实现思路

利用 JavaScript 监听输入框的input事件，将每次输入变化后的值存储到一个数组中，构建输入历史记录；同时为撤销按钮绑定点击事件，当按钮被点击时，从历史记录数组中移除当前值，并将输入框恢复为上一个历史值。

效果图;

代码实现过程

1. HTML 结构搭建

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 样式设计

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 功能实现

javascript 复制代码

const inputField = document.getElementById('inputField');
const undoButton = document.getElementById('undoButton');
//存储输入框的历史值
const history = [];
//输入框的事件监听
inputField.addEventListener('input', () => {
    // 当前框中值放入数组
    history.push(inputField.value);
});
//按钮事件监听
undoButton.addEventListener('click', () => {
    // 如果数组长度大于1
    if (history.length > 1) {
        // 移除数组最后一个元素
        history.pop();
        // 并将输入框的值设置为数组的倒数第二个元素。
        inputField.value = history[history.length - 1];
    }
});

JavaScript 代码实现了核心的撤销功能：

首先通过document.getElementById方法获取inputField输入框和undoButton按钮元素。
定义一个空数组history，用于存储输入框的历史值。
为输入框添加input事件监听器，每次输入内容发生变化时，将当前输入框的值添加到history数组中。
为撤销按钮添加click事件监听器，当按钮被点击时，检查history数组长度是否大于 1（确保存在可撤销的历史记录），如果满足条件，使用pop方法移除数组中最新的记录，并将输入框的值设置为数组中倒数第二个元素，实现撤销效果。

功能效果与应用场景

通过上述代码，在浏览器中打开页面后，用户在输入框中输入内容时，每一次输入变化都会被记录；点击 "撤销" 按钮，输入框的内容会回退到上一次输入的状态。该功能适用于文本编辑器、搜索框等多种需要撤销操作的场景，能有效提升用户在数据输入过程中的便捷性和操作容错性。

以上就是实现输入框撤销功能的全部内容，通过简单的代码组合，就可以为 Web 应用增添实用的交互功能，希望本文对大家有所帮助！