如何使用 JavaScript 在页面加载时（即，不在按键时）检测 Caps Lock 状态？
Posted
技术标签:
【中文标题】如何使用 JavaScript 在页面加载时（即，不在按键时）检测 Caps Lock 状态？【英文标题】：How to detect Caps Lock state on page load (that is, not on keypress) with JavaScript? 【发布时间】：2015-10-25 20:15:48 【问题描述】：所以我一直在研究使用 javascript/jQuery 对表单进行 Caps Lock 检测的解决方案。 *** 上有一个巨大的线程，提供了许多解决方案。但唯一的问题是他们不检查 Caps Lock 本身是否被直接按下。它们检测是否输入了大写字母以及是否没有按下 shift 键。这样做的缺点是，在用户开始输入表单之前，我的 Caps Lock 警告消息不会打开/关闭，这几乎不是最佳选择。这是我的代码。
document.onkeypress = function(e)
e = e || window.event;
var s = String.fromCharCode(e.keyCode || e.which);
if (s.toUpperCase() === s && !e shiftKey)
capsWarning.style.visibility = 'visible';
else
capsWarning.style.visibility = 'hidden';
有没有更好的方法，当我按下 Caps Lock 键时，我可以使用 JavaScript 触发大写锁定消息？也就是说，在我开始输入之前不要延迟切换消息？
比起 JQuery，我更喜欢纯 JavaScript 解决方案。虽然如果你认为 jQuery 会非常非常好，请说出原因，我可以向我的同事施压，让我将它包含在此处；o
【问题讨论】：
有些场景没有涵盖：如果大写锁定在页面加载之前处于活动状态怎么办？ AFAIK 在按下键之前无法获取键盘状态。 我的意思是，我希望 JavaScript 在我开始在输入字段中输入密码之前检测 Caps Lock 是否打开。所以是的，必须按下一个键。现在，用户只有在他/她开始输入登录详细信息后才会知道 Caps Lock 是否打开。这不是最优的。很抱歉造成混乱。 现代浏览器在事件对象中有getModifierState()方法。如果您不必支持较旧的浏览器，则可以使用它。虽然这也需要一个事件，但你可以通过自己触发一个事件来实现它？
您能否举一个更详细的使用 getModifierState() Teemu 的例子？
@Gaweyne Here's a fiddle。不幸的是，似乎只有 MouseEvents 和 KeyboardEvents 有 getModifierState 方法。你的任务的一个好的事件是onfocus，但它的事件对象没有上述方法。此外，如果您通过 JS 触发 keydown 方法，您将始终从 getModifierState() 获得false（请参阅链接小提琴的第一个版本）。
【参考方案1】：
我在 chrome 中测试了它，它工作正常，把这个 JavaScript 放在标签中
function loadcaps ( e )
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( s.toUpperCase() === s && !e.shiftKey )
capsWarning.style.visibility = 'visible';
else
capsWarning.style.visibility = 'hidden';
并把它放在你的标签上
<body onload="loadcaps()">
让我知道它是否适合你。
【讨论】：
【参考方案2】：使用下面提到的代码：
<script language="Javascript">
function capLock(e)
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divon').style.visibility = 'visible';
document.getElementById('divoff').style.visibility = 'hidden';
else
document.getElementById('divon').style.visibility = 'hidden';
document.getElementById('divoff').style.visibility = 'visible';
</script>
<input type="text" name="trackcaps" onkeypress="capLock(event)" />
<div id="divon" style="visibility:hidden">Caps Lock is on.</div>`enter code here`
<div id="divoff" style="visibility:hidden">Caps Lock is off.</div>
【讨论】：
【参考方案3】：我已经使用了这段代码并尝试调度一个事件。 getModifierState MSDN, MDN 除了 false 之外不会返回。实际上，您将按原样发送一个字符-“a”或“A”。无论哪种情况，它都会被硬编码。
getModifierState 仅在真正按键的情况下才会返回 true。
但是在 IE 11 中有一个自动 CapsLock 检测（对于<input type="password" />）
var eventType = "keypress";
window.addEventListener ( eventType, function(e)
var msg = "Key Pressed: " + String.fromCharCode(e.charCode) + "\n" + "charCode: " + e.charCode + "\n" + e.getModifierState ( "CapsLock" );
console.log ( msg );
, false );
function simulateKeyEvent()
var evt = document.createEvent("KeyboardEvent");
var initMethod = typeof evt.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";
evt[initMethod](
"keypress", // type,
true, // bubbles,
true, // cancelable,
window, // viewArg,
0, // ctrlKeyArg,
0, // altKeyArg,
0, // shiftKeyArg,
0, // metaKeyArg,
/* lower a */ 97, // keyCodeArg,
/* lower a */ 97 // charCodeArg
);
window.dispatchEvent(evt);
simulateKeyEvent();
【讨论】：
【参考方案4】：使用onkeydown 处理程序：
document.onkeypress=function()console.log(arguments);
【讨论】：
请重新阅读问题。它询问如何在不等待按键的情况下进行操作。 我用 onkeydown 替换了 onkeypress。当我在输入任何内容之前按下大写键时，会出现我的大写锁定消息。但是当我再次按下大写，将其关闭时，消息仍然存在；o @Quentin 那是不可能的。我正在解决这部分问题：Is there a better way, that I can trigger a caps lock message, with JavaScript when I press the Caps Lock key?
lel。实际上，现在无论我按什么键都会显示大写锁定消息：s
@昆汀。没有肯尼是对的。至少必须按下 Caps Lock。我想知道 JavaScript 是否可以检测到，而无需在输入字段中输入。 “有没有更好的方法，我可以在按下 Caps Lock 键时使用 JavaScript 触发大写锁定消息？也就是说，不要延迟切换消息，直到我开始输入 [即，例如输入密码]”不清楚。以上是关于如何使用 JavaScript 在页面加载时（即，不在按键时）检测 Caps Lock 状态？的主要内容，如果未能解决你的问题，请参考以下文章
当页面在没有 javascript 支持的情况下加载时，如何将光标（自动聚焦）放置在文本框中？
如何在加载我的 html 页面时调用 JavaScript 函数？ [复制]