(AI出品，必须能跑)自动填充用户评论信息

寻梦xunm| 35| 网络收集

4小时前

用户首次评论提交后，保存其名称、邮箱等信息，下次再进入评论页面（或刷新后），自动将保存的信息填充到对应的输入框中。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自动填充用户评论信息</title>
    <style>
        /* 简单样式美化，不影响核心功能 */
        .comment-container {
            width: 600px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .comment-item {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        input, textarea {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 14px;
        }
        textarea {
            height: 120px;
            resize: vertical;
        }
        button {
            padding: 10px 20px;
            background-color: #42b983;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background-color: #359469;
        }
    </style>
</head>
<body>
    <div class="comment-container">
        <h3>评论区</h3>
        <div class="comment-item">
            <label for="username">姓名：</label>
            <input type="text" id="username" placeholder="请输入你的姓名">
        </div>
        <div class="comment-item">
            <label for="useremail">邮箱：</label>
            <input type="email" id="useremail" placeholder="请输入你的邮箱">
        </div>
        <div class="comment-item">
            <label for="comment-content">评论内容：</label>
            <textarea id="comment-content" placeholder="请输入你的评论内容"></textarea>
        </div>
        <button id="submit-comment">提交评论</button>
    </div>

    <script>
        // 1. 获取页面中的DOM元素
        const usernameInput = document.getElementById('username');
        const useremailInput = document.getElementById('useremail');
        const commentContentInput = document.getElementById('comment-content');
        const submitBtn = document.getElementById('submit-comment');

        // 定义localStorage的存储键名（方便后续维护）
        const COMMENT_USER_INFO_KEY = 'comment_user_info';

        // 2. 页面加载完成后，自动填充已保存的用户信息
        function fillUserInfo() {
            // 从localStorage中获取保存的用户信息（localStorage存储的是字符串，需要用JSON.parse转换为对象）
            const savedUserInfo = localStorage.getItem(COMMENT_USER_INFO_KEY);
            if (savedUserInfo) {
                const userInfo = JSON.parse(savedUserInfo);
                // 将保存的信息填充到对应的输入框中
                usernameInput.value = userInfo.username || '';
                useremailInput.value = userInfo.useremail || '';
            }
        }

        // 3. 提交评论时，保存用户的姓名和邮箱信息
        function saveUserInfo() {
            // 获取输入框中的值（去除前后空格）
            const username = usernameInput.value.trim();
            const useremail = useremailInput.value.trim();
            const commentContent = commentContentInput.value.trim();

            // 简单表单验证
            if (!username) {
                alert('请输入你的姓名！');
                return false;
            }
            if (!useremail) {
                alert('请输入你的邮箱！');
                return false;
            }
            if (!commentContent) {
                alert('请输入评论内容！');
                return false;
            }

            // 构造用户信息对象
            const userInfo = {
                username: username,
                useremail: useremail
            };

            // 将用户信息保存到localStorage中（localStorage只能存储字符串，需要用JSON.stringify转换）
            localStorage.setItem(COMMENT_USER_INFO_KEY, JSON.stringify(userInfo));

            // 提示评论提交成功（实际项目中这里会对接后端接口，提交评论数据）
            alert('评论提交成功！');

            // 清空评论内容输入框（姓名和邮箱保留，方便用户再次评论修改）
            commentContentInput.value = '';

            return true;
        }

        // 4. 绑定事件
        // 页面加载完成后执行填充逻辑
        window.onload = fillUserInfo;

        // 提交按钮点击事件
        submitBtn.addEventListener('click', saveUserInfo);
    </script>
</body>
</html>

代码关键部分解释

localStorage 的使用
localStorage.setItem(key, value)：用于存储数据，key 是存储的键名，value 只能是字符串类型，因此我们用 JSON.stringify() 将用户信息对象转换为字符串。
localStorage.getItem(key)：用于获取指定键名存储的数据，返回值是字符串，因此需要用 JSON.parse() 转换回 JavaScript 对象，方便提取数据。
存储键名定义为常量 COMMENT_USER_INFO_KEY，后续如果需要修改键名，只需修改这一个常量即可，提升可维护性。

页面加载自动填充

利用 window.onload 事件，确保页面所有 DOM 元素加载完成后再执行填充逻辑，避免获取不到输入框元素。
先判断是否存在已保存的信息，存在才进行填充，避免出现 undefined 等异常。

表单验证与数据保存

提交时先去除输入框值的前后空格（trim()），避免用户输入无效的空白内容。
只保存姓名和邮箱，评论内容不保存，符合用户使用习惯（用户每次评论的内容大概率不同）。
提交成功后清空评论内容输入框，保留姓名和邮箱，方便用户再次提交新评论。

END

免费教程 html js 代码

本站相关资源来自互联网用户收集发布，仅供用于学习和交流。如有侵权之处，请联系站长并出示相关证明以便删除，敬请谅解！

0 赞 or 打赏

喜欢就打赏一点