如何在用户删除输入框文本时为按钮添加disabled类？

问题根源 #

• keypress 事件不会触发在退格、删除这类非字符输入的按键上，所以删除内容时不会进入判断逻辑
• keydown 事件触发于按键按下的瞬间，此时输入框的内容还未完成更新，你获取到的长度是删除前的数值，导致判断失效

正确实现方案 #

使用input事件，它会在输入框内容实际发生变化后触发，覆盖所有内容变更场景（输入、删除、粘贴、剪切等），同时补充页面初始化时的状态设置：

// 监听输入框内容变更
$('body').on('input', '#other-text', function() {
    const $submitBtn = $("#step5 button[type='submit']");
    // 长度大于1时移除禁用类，否则添加
    if ($(this).val().length > 1) {
        $submitBtn.removeClass("disabled");
    } else {
        $submitBtn.addClass("disabled");
    }
});

// 页面加载完成后初始化按钮状态
$(function() {
    const $submitBtn = $("#step5 button[type='submit']");
    if ($('#other-text').val().length <= 1) {
        $submitBtn.addClass("disabled");
    }
});

补充说明 #

• input 事件是处理输入框内容变化最可靠的事件，无需区分按键类型
• 初始化代码确保页面刚加载时，按钮状态与输入框初始内容匹配
• 原代码中未处理输入框长度等于1的情况，用else统一覆盖所有长度≤1的场景，逻辑更完整

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