如何实现禁止发布超300字符的帖子并禁用「Bloob」按钮？

帖子截图

我希望实现：当输入内容超过300字符时，无法点击「Bloob」按钮；页面左侧已有JavaScript实现的字符计数器。

相关模型代码 #

class Post(models.Model):
    timestamp = models.DateTimeField(default=timezone.now)
    content = models.TextField(max_length=300)
    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='posts')

PostForm表单代码 #

class PostForm(forms.ModelForm):
    content = forms.CharField(widget=forms.Textarea(attrs={
        'class': 'form-control w-100',
        'id': 'contentsBox', 
        'rows': '3',
        'placeholder': '¿Qué está pasando?'
    }))

实现方案 #

1. 先给「Bloob」按钮添加ID，比如id="bloobBtn"，方便JS定位元素
2. 编写监听文本框输入的JS代码，实时控制按钮状态：

// 获取元素
const contentBox = document.getElementById('contentsBox');
const bloobBtn = document.getElementById('bloobBtn');

// 页面加载时先检查一次
checkCharLimit();

// 监听输入事件，实时更新按钮状态
contentBox.addEventListener('input', checkCharLimit);
contentBox.addEventListener('keyup', checkCharLimit);

function checkCharLimit() {
    const maxChars = 300;
    const currentChars = contentBox.value.length;
    
    if (currentChars > maxChars) {
        bloobBtn.disabled = true;
        // 可选：给按钮加禁用样式提示
        bloobBtn.classList.add('btn-disabled');
    } else {
        bloobBtn.disabled = false;
        bloobBtn.classList.remove('btn-disabled');
    }
}

如果你的字符计数器已经有计算当前字符数的逻辑，直接复用那个数值即可，不用重复计算长度。另外注意：后端已经通过max_length=300做了数据校验，前端禁用按钮只是优化用户体验，后端校验依然是必要的，防止绕过前端提交超长内容。

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