如何在用户未离开输入框时检测输入非空并控制提交按钮？

原方案使用change事件的问题在于，该事件仅在输入框失去焦点时触发，无法满足实时检测的需求。我们可以通过以下方式修改，实现用户在输入框内操作时立即触发检测：

方案一：使用jQuery实现 #

将change事件替换为input事件，该事件会在输入框内容发生任何变化（包括输入、删除、粘贴等）时立即触发。同时可以优化代码，缓存DOM元素引用以提升性能：

$(function () {
    const $loginBtn = $('#login');
    const $userInput = $('#userinput');
    
    // 初始化按钮为禁用状态
    $loginBtn.attr('disabled', true);
    
    // 绑定input事件实时检测输入内容
    $userInput.on('input', function () {
        // 根据输入框内容是否为空（去除首尾空格后）切换按钮状态
        $loginBtn.attr('disabled', $userInput.val().trim() === '');
    });
});

方案二：原生JavaScript实现 #

如果项目未使用jQuery，直接用原生JS也可以实现相同效果：

document.addEventListener('DOMContentLoaded', function () {
    const loginBtn = document.getElementById('login');
    const userInput = document.getElementById('userinput');
    
    // 初始化按钮状态
    loginBtn.disabled = true;
    
    // 监听输入框的input事件
    userInput.addEventListener('input', function () {
        loginBtn.disabled = userInput.value.trim() === '';
    });
});

对应的HTML代码 #

<input type="text" name="userinput" class="form-control" id="userinput">

<button id="login" class="button" disabled>Submit</button>

说明 #

• input事件覆盖了所有导致输入框内容变更的操作，确保实时响应用户输入。
• 使用trim()方法可以过滤用户仅输入空格的情况，保证只有输入有效内容时才启用提交按钮。

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