使用 jQuery 显示大写锁定 [重复]

Posted 2023-03-16

【中文标题】使用 jQuery 显示大写锁定 [重复]

【英文标题】：show caps lock is on using jQuery [duplicate]

【发布时间】：2013-04-07 03:00:32

【问题描述】：

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

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

【问题讨论】：

***.com/questions/348792/… 重复这个..

检查这个***.com/a/896515/779158。我认为它在 jquery 中也是如此。

我提供的链接和这个是一样的。我需要不同的解决方案

您必须在检测之前等待按键被按下。无法查看大写锁定是否自然开启

@PSR 我猜它使用了 Java Applet 或 Flash。

【参考方案1】：

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

您可以查询大写锁定键的状态，也可以定义事件侦听器以响应状态变化。

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

有两个演示，one showing basic event binding 和另一个 showing the warning only when the password field has focus。

例如

$(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(););

The code for the plugin 可在 GitHub 上查看。

【讨论】：

只有在按下大写锁定键时才能工作。但是如果我们使用 shift 键意味着它不会来。

【参考方案2】：

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

查看此帖子：detect caps lock status on page load (or similar)