如何为带label标签的密码框实现按下Caps Lock时显示大写锁定提示

修正后的完整代码 #

<div class="form-group">
    <label for="password">Password<span class="star"> *</span></label>
    <div class="input-group">
        <div class="input-group-prepend bg-transparent">
            <span class="caps-lock-warning" style="color: brown;">caps lock is on.</span>
            <i class="fa fa-lock text-dark"></i>
        </div>
        <input type="password" class="form-control form-control-lg border-left-0" id="password" placeholder="Password" name="password" required autocomplete="off">
    </div>
</div>

<script>
$(function(){
    // 初始隐藏提示
    const $capsWarning = $('.caps-lock-warning').hide();
    const $passwordInput = $('#password');

    // 监听Caps Lock按键事件
    $(document).keydown(function(e){
        if(e.which === 20){ // Caps Lock键的键码是20
            // 获取当前Caps Lock的激活状态
            const isCapsActive = e.getModifierState('CapsLock');
            // 根据状态显示/隐藏提示
            $capsWarning.toggle(isCapsActive);
            // 记录状态到输入元素（可选，用于其他逻辑）
            $passwordInput[0].caps = isCapsActive;
        }
    });

    // 窗口失去焦点时隐藏提示
    $(window).blur(function(){
        $capsWarning.hide();
        $passwordInput[0].caps = null;
    });
});
</script>

关键修复点 #

1. HTML语法错误修正：移除了input-group-prepend内多余的</span>标签，确保DOM结构合法。
2. 提示元素定位修复：原代码通过$(this).next('.caps-lock-warning')无法找到提示元素（提示不在输入框同级位置），改为直接选择或通过父容器遍历定位，确保能正确操作提示元素。
3. 状态判断简化：使用e.getModifierState('CapsLock')直接获取当前Caps Lock激活状态，替代原代码中基于字符转换的复杂判断，状态更准确。
4. 贴合需求逻辑：仅在按下Caps Lock键时触发提示的显示/隐藏，其他按键操作不执行任何行为，完全匹配需求要求。

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