jquery - 使用 jQuery 显示大写锁定

Question

当我打开登录页面时，如果大写锁定已打开，我需要立即显示大写锁定已打开。我看到一些帖子，比如

这在按键中显示。但我想在页面加载后立即显示。我如何使用 jQuery 来做到这一点。请帮助我。在此先感谢。

Answer 1

有一个名为 capslockstate 的 jQuery 插件，它将监视整个页面上大写锁定键的状态，而不仅仅是在特定字段中。

您可以查询大写锁定键的状态或定义事件侦听器以响应状态更改。

与此处的其他建议相比，该插件在检测和状态管理方面做得更好，包括使用非英语键盘，监控 Caps Lock 键本身的使用，以及在输入非字母字符时不要忘记状态。

有两个演示，一个显示基本事件绑定，另一个仅在密码字段具有焦点时显示警告。

例如

$(document).ready(function() {

/* 
* Bind to capslockstate events and update display based on state 
*/
$(window).bind("capsOn", function(event) {
    $("#statetext").html("on");
});
$(window).bind("capsOff", function(event) {
    $("#statetext").html("off");
});
$(window).bind("capsUnknown", function(event) {
    $("#statetext").html("unknown");
});

/*
* Additional event notifying there has been a change, but not the state
*/
$(window).bind("capsChanged", function(event) {
    $("#changetext").html("changed").show().fadeOut();
});

/* 
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();

// Call the "state" method to retreive the state at page load
var initialState = $(window).capslockstate("state");
$("#statetext").html(initialState);});

和

$(document).ready(function() {

/* 
* Bind to capslockstate events and update display based on state 
*/
$(window).bind("capsOn", function(event) {
    if ($("#Passwd:focus").length > 0) {
        $("#capsWarning").show();
    }
});
$(window).bind("capsOff capsUnknown", function(event) {
    $("#capsWarning").hide();
});
$("#Passwd").bind("focusout", function(event) {
    $("#capsWarning").hide();
});
$("#Passwd").bind("focusin", function(event) {
    if ($(window).capslockstate("state") === true) {
        $("#capsWarning").show();
    }
});

/* 
* Initialize the capslockstate plugin.
* Monitoring is happening at the window level.
*/
$(window).capslockstate();});

该插件的代码可在 GitHub 上查看。

Answer 2

抱歉，您无法在页面加载时获得键盘按钮的状态。您必须分析按键的 keyCode。这是唯一的方法。

检查这篇文章：在页面加载（或类似）时检测大写锁定状态