能否将指定jQuery代码改写为纯Vanilla JavaScript代码？

数据老陈

2026-8-16

纯JavaScript重写版本

下面是将你提供的jQuery代码转换为纯JavaScript的实现，功能完全一致：

// 聚合输入内容到email-message文本框
document.addEventListener('DOMContentLoaded', function() {
    const aggregateInput = function() {
        const urlInput = document.querySelector('input[name="url"]');
        const subjectInput = document.querySelector('input[name="subject"]');
        const messageTextarea = document.querySelector('textarea[name="customer service"]');
        const emailMessageTextarea = document.querySelector('textarea[name="email-message"]');

        const value = `Website Url: ${urlInput.value}

Subject: ${subjectInput.value}

Brief Message: ${messageTextarea.value.replace(/\n/g, '<br/>')}`;
        
        emailMessageTextarea.value = value;
    };

    // 给所有.contact-style元素绑定keyup事件
    document.querySelectorAll('.contact-style').forEach(element => {
        element.addEventListener('keyup', aggregateInput);
    });
});

// 根据输入状态启用/禁用提交按钮
document.addEventListener('DOMContentLoaded', function() {
    const submitBtn = document.querySelector('.contact-form-button-submit');
    const messageInput = document.querySelector('.customform-message');

    // 初始禁用按钮
    submitBtn.disabled = true;

    messageInput.addEventListener('keyup', function() {
        submitBtn.disabled = this.value.length === 0;
    });
});

关键转换说明：

$(function()) 和 $(document).ready() 替换为 document.addEventListener('DOMContentLoaded', ...)，确保DOM加载完成后执行代码
jQuery选择器 $('selector') 替换为 document.querySelector('selector')（单个元素）或 document.querySelectorAll('selector')（多个元素）
.val() 替换为元素的 .value 属性
.on('keyup', handler) 替换为 .addEventListener('keyup', handler)
.attr('disabled', true/false) 替换为直接设置元素的 .disabled 属性（布尔值）