Django开发中JavaScript无法正常控制提交按钮禁用启用状态求助

问题原因与修复方案 #

核心问题 #

你当前代码的主要问题是仅绑定了keyup事件，无法覆盖鼠标粘贴、拖拽输入等非键盘输入的场景，同时可能存在浏览器缓存旧静态文件的问题，导致修改后的代码没有生效。

优化后的代码 #

1. 替换listing.js内容

document.addEventListener('DOMContentLoaded', function () {
    hide_submit_review_button();
});

function hide_submit_review_button() {
    const submitReviewBtn = document.getElementById('submit-review-button');
    const reviewInput = document.getElementById('review-contents');

    if (submitReviewBtn && reviewInput) {
        // 初始化禁用按钮
        submitReviewBtn.disabled = true;
        
        // 统一处理按钮状态逻辑
        const toggleSubmitBtn = () => {
            const inputLen = reviewInput.value.length;
            submitReviewBtn.disabled = !(inputLen > 0 && inputLen <= 100);
        };

        // 绑定input事件，覆盖所有输入场景（键盘输入、粘贴、自动填充等）
        reviewInput.addEventListener('input', toggleSubmitBtn);
        // 页面加载时主动执行一次，适配浏览器自动回填内容的场景
        toggleSubmitBtn();
    }
}

2. 可选优化（限制输入长度）

在listing.html的输入框中添加maxlength属性，从前端层面直接禁止用户输入超过100字符的内容：

<input type="text" class="form-control" name="review" id="review-contents" placeholder="Write a review..." maxlength="100">

验证步骤 #

修改代码后，强制刷新浏览器页面（Windows按Ctrl+Shift+R，Mac按Cmd+Shift+R）清空静态文件缓存，再测试功能即可。

内容的提问来源于stack exchange，提问作者equanimity