用js写一个Caps Lock键处于开启状态时输入框提醒大写已开启

在JavaScript中，你可以使用`document.onkeyup`和`document.onkeydown`事件来检测Caps Lock键的状态，并提供相应的提示。下面是一个简单的示例，它将在用户按下和释放Caps Lock键时改变输入框的样式，表示大写模式是否开启：

// 获取输入框元素
const inputBox = document.getElementById('your-input-box-id');

// 定义变量记录Caps Lock状态
let isCapsLockOn = false;

// 监听键盘按键事件
document.addEventListener('keydown', function(event) {
    if (event.keyCode === 20) { // 20是 Caps Lock 的ASCII码
        isCapsLockOn = true;
        if (!inputBox.classList.contains('caps-lock-on')) {
            inputBox.classList.add('caps-lock-on'); // 添加CSS类显示大写提示
        }
    }
});

document.addEventListener('keyup', function(event) {
    if (event.keyCode === 20) {
        isCapsLockOn = false;
        if (inputBox.classList.contains('caps-lock-on')) {
            inputBox.classList.remove('caps-lock-on'); // 移除CSS类停止提示
        }
    }
});

// CSS 类定义用于大写提示
inputBox.classList.add('caps-lock-on', {
    color: 'red', // 或者其他你想用的颜色
    textDecoration: 'underline'
});

在这个例子中，当你按下Caps Lock键时，`caps-lock-on`类会被添加到输入框上，改变其颜色或下划线等样式以提示用户已经开启了大写输入。当松开Caps Lock键时，这个提示就会消失。