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 代码实现了核心的撤销功能:

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

功能效果与应用场景

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

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

相关推荐
wjs20242 小时前
状态模式(State Pattern)
开发语言
我命由我123452 小时前
Kotlin 数据容器 - List(List 概述、创建 List、List 核心特性、List 元素访问、List 遍历)
java·开发语言·jvm·windows·java-ee·kotlin·list
liulilittle2 小时前
C++ TAP(基于任务的异步编程模式)
服务器·开发语言·网络·c++·分布式·任务·tap
励志要当大牛的小白菜4 小时前
ART配对软件使用
开发语言·c++·qt·算法
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
爱装代码的小瓶子6 小时前
数据结构之队列(C语言)
c语言·开发语言·数据结构
Maybe_ch7 小时前
.NET-键控服务依赖注入
开发语言·c#·.net
超浪的晨7 小时前
Java UDP 通信详解:从基础到实战,彻底掌握无连接网络编程
java·开发语言·后端·学习·个人开发
终焉暴龙王7 小时前
CTFHub web进阶 php Bypass disable_function通关攻略
开发语言·安全·web安全·php
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript