你如何告诉如果大写锁定使用JavaScript?

小开

最佳答案

你可以试试。增加了一个工作示例。当焦点在输入上时，打开caps lock使led变成红色或绿色。(还没有在mac/linux上测试)

注意:两个版本都适用于我。感谢您在评论中提出建设性意见。

旧版本:__abc0

另外，这是一个修改后的版本(有人能在mac上测试并确认吗)

新版本:__abc0

新版本:

function isCapslock(e) {
const IS_MAC = /Mac/.test(navigator.platform);


const charCode = e.charCode;
const shiftKey = e.shiftKey;


if (charCode >= 97 && charCode <= 122) {
capsLock = shiftKey;
} else if (charCode >= 65 && charCode <= 90
&& !(shiftKey && IS_MAC)) {
capsLock = !shiftKey;
}


return capsLock;
}

旧版本:

function isCapslock(e) {
e = (e) ? e : window.event;


var charCode = false;
if (e.which) {
charCode = e.which;
} else if (e.keyCode) {
charCode = e.keyCode;
}


var shifton = false;
if (e.shiftKey) {
shifton = e.shiftKey;
} else if (e.modifiers) {
shifton = !!(e.modifiers & 4);
}


if (charCode >= 97 && charCode <= 122 && shifton) {
return true;
}


if (charCode >= 65 && charCode <= 90 && !shifton) {
return true;
}


return false;
}

对于国际字符，可以根据需要为以下键添加额外的检查。你必须获得你感兴趣的字符的键码范围，可能是通过使用一个键映射数组，它将保存你正在寻址的所有有效用例键…

大写字母A-Z或'Ä'， 'Ö'， 'Ü'，小写字母a-Z或0-9或'ä'， 'ö'， 'ü'

上面的键只是示例表示。

小开

在jQuery:

$('some_element').keypress(function(e){
if(e.keyCode == 20){
//caps lock was pressed
}
});

这个jQuery插件 (代码)更简洁地实现了与拉杰什的回答中相同的思想。

小开

您可以使用“是大写字母，没有shift按下”来检测caps锁定，使用在文档上的按键捕获。但是，您最好确保在事件到达文档上的处理程序之前，没有其他按键处理程序弹出事件气泡。

document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}

您可以在支持捕获阶段的浏览器中捕获事件，但这似乎没有意义，因为它不会在所有浏览器上工作。

我想不出任何其他方法来检测caps锁定状态。检查很简单，如果输入了不可检测的字符，那么……那么检测就没有必要了。

去年这上面有一篇关于24种方法的文章。非常好，但缺乏国际字符支持(使用toUpperCase()来解决这个问题)。

小开

在jQuery中,

$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});

避免这个错误，就像backspace键一样，s.toLowerCase() !== s是需要的。

小开

在JQuery。这涵盖了Firefox中的事件处理，并将检查意外的大写字母和小写字符。这预先假设了一个<input id="password" type="password" name="whatever"/>element和一个id为'capsLockWarning'的单独元素，该元素具有我们想要显示的警告(但否则将被隐藏)。

$('#password').keypress(function(e) {
e = e || window.event;


// An empty field resets the visibility.
if (this.value === '') {
$('#capsLockWarning').hide();
return;
}


// We need alphabetic characters to make a match.
var character = String.fromCharCode(e.keyCode || e.which);
if (character.toUpperCase() === character.toLowerCase()) {
return;
}


// SHIFT doesn't usually give us a lowercase character. Check for this
// and for when we get a lowercase character when SHIFT is enabled.
if ((e.shiftKey && character.toLowerCase() === character) ||
(!e.shiftKey && character.toUpperCase() === character)) {
$('#capsLockWarning').show();
} else {
$('#capsLockWarning').hide();
}
});

小开

在下面的代码，它将显示警报时，Caps锁定，他们按下键使用shift。

如果返回false;那么当前字符将不会附加到文本页。

$('#password').keypress(function(e) {
// e.keyCode is not work in FF, SO, it will
// automatically get the value of e.which.
var s = String.fromCharCode( e.keyCode || e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
return false;
}
else  if ( s.toUpperCase() !== s) {
alert('caps is on and Shiftkey pressed');
return false;
}
});

小开

我知道这是一个老话题，但我想我会反馈，以防它能帮助到其他人。这个问题的答案在IE8中似乎都不能用。然而，我确实发现这段代码在IE8中工作。(还没有测试过IE8以下的任何版本)。如果需要，这可以很容易地为jQuery修改。

function capsCheck(e,obj){
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('#'+obj.id).style.visibility = 'visible';
}
else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

函数通过onkeypress事件调用，如下所示:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>

小开

当您键入时，如果caplock是打开的，它可以自动将当前字符转换为小写字母。这样，即使打开了caplocks，它的行为也不会像在当前页面上那样。为了通知您的用户，您可以显示一个文本，说明caplocks已打开，但表单条目已转换。

小开

试试这个简单的代码，容易理解

这是脚本

 <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('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

还有Html

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>

小开

最近hashcode.com上有一个类似的问题，我创建了一个jQuery插件来处理它。它还支持对数字的大写锁定识别。(在标准德语键盘布局上，大写锁定对数字有影响)。

你可以在这里查看最新版本:jquery.capsChecker

小开

许多现有的答案会在shift键未按下时检查是否有大写锁，但如果你按下shift键并得到小写字母，则不会检查，或者会检查但不会检查大写锁是否关闭，或者会检查但将非alpha键视为“关闭”。下面是一个经过调整的jQuery解决方案，如果alpha键按下带有大写(shift或不shift)，将显示警告，如果alpha键按下没有大写，将关闭警告，但当数字或其他键按下时，将不会关闭或打开警告。

$("#password").keypress(function(e) {
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$("#CapsWarn").show();
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$("#CapsWarn").hide();
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
});

小开

这里最上面的答案对我来说不适用，有几个原因(未注释的代码带有死链接和不完整的解决方案)。所以我花了几个小时尝试了所有的版本，得到了我能得到的最好的:这里是我的，包括jQuery和非jQuery。

jQuery

注意，jQuery规范化了事件对象，因此缺少了一些检查。我还将其缩小到所有密码字段(因为这是需要它的最大原因)，并添加了一条警告消息。这已经在Chrome, Mozilla, Opera和IE6-8中进行了测试。稳定的，捕获所有的大写锁状态，除非数字或空格被按下。

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {


var $warn = $(this).next(".capsWarn"); // handle the warning mssg
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed


// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
$warn.show();
} else {
$warn.hide();
}


}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

没有jQuery

其他一些无jquery的解决方案缺少IE的备用方案。@Zappa打了补丁。

document.onkeypress = function ( e ) {
e = (e) ? e : window.event;


var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-


// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
alert("CAPSLOCK is on."); // do your thing here
} else {
// no CAPSLOCK to speak of
}


}

注意:查看@Borgar， @Joe Liversedge和@Zappa的解决方案，以及@Pavel Azanov开发的插件，我没有尝试过，但是个好主意。如果有人知道如何扩展a- za -z之外的范围，请编辑掉。此外，这个问题的jQuery版本被关闭为重复，所以这就是为什么我在这里发布这两个问题。

小开

这段代码检测大小写锁定，无论是否按下shift键:

$('#password').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('caps is on');
}
});

小开

这是一个解决方案，除了在写入时检查状态外，还在每次按大写锁定键时切换警告消息(有一些限制)。

它还支持A-Z范围之外的非英语字母，因为它根据toUpperCase()和toLowerCase()检查字符串字符，而不是根据字符范围检查。

$(function(){
//Initialize to hide caps-lock-warning
$('.caps-lock-warning').hide();


//Sniff for Caps-Lock state
$("#password").keypress(function(e) {
var s = String.fromCharCode( e.which );
if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
this.caps = true; // Enables to do something on Caps-Lock keypress
$(this).next('.caps-lock-warning').show();
} else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
this.caps = false; // Enables to do something on Caps-Lock keypress
$(this).next('.caps-lock-warning').hide();
}//else else do nothing if not a letter we can use to differentiate
});


//Toggle warning message on Caps-Lock toggle (with some limitation)
$(document).keydown(function(e){
if(e.which==20){ // Caps-Lock keypress
var pass = document.getElementById("password");
if(typeof(pass.caps) === 'boolean'){
//State has been set to a known value by keypress
pass.caps = !pass.caps;
$(pass).next('.caps-lock-warning').toggle(pass.caps);
}
}
});


//Disable on window lost focus (because we loose track of state)
$(window).blur(function(e){
// If window is inactive, we have no control on the caps lock toggling
// so better to re-set state
var pass = document.getElementById("password");
if(typeof(pass.caps) === 'boolean'){
pass.caps = null;
$(pass).next('.caps-lock-warning').hide();
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

注意，只有在大写锁定键被按下之前，我们知道大写锁的状态时，观察大写锁的切换才有用。当前的大写锁定状态由password元素上的caps JavaScript属性保存。这是当用户按下一个大写或小写字母时，我们第一次验证大写锁定状态时设置的。如果窗口失去焦点，我们就不能再观察到caps锁定切换，所以我们需要重置到未知状态。

小开

试着使用这段代码。

$('selectorOnTheInputTextBox').keypress(function (e) {
var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
var capsOn =
e.keyCode &&
!e.shiftKey &&
!e.ctrlKey &&
charCode >= 65 &&
charCode <= 90;


if (capsOn)
//action if true
else
//action if false
});

祝你好运!

小开

我写了一个名为大写锁定的库，它做的正是你想要它做的。

只要把它包括在你的网页上:

<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

然后像这样使用它:

alert(capsLock.status);


capsLock.observe(function (status) {
alert(status);
});

参见演示:http://jsfiddle.net/3EXMd/

按下“Caps Lock”键更新状态。它只使用Shift键来确定Caps Lock键的正确状态。最初状态是false。所以要小心。

小开

还有另一个版本，清晰而简单，处理移位的capsLock，并且不受ascii限制，我认为:

document.onkeypress = function (e)
{
e = e || window.event;
if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
return;
var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
var capsLockOn = (s2 !== s);
document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

编辑:意义上的capsLockOn被逆转，doh，固定。

编辑# 2:在检查了更多之后，我做了一些更改，不幸的是更详细的代码，但它适当地处理更多的操作。

使用e.charCode而不是e.keyCode并检查0值可以跳过许多非字符按键，而无需编码任何特定于给定语言或字符集的内容。根据我的理解，它的兼容性稍差，所以旧的、非主流的或移动浏览器的行为可能不像这段代码所期望的那样，但对于我的情况来说，这是值得的。

根据已知的标点符号代码列表进行检查，可以防止它们被视为假否定，因为它们不受大写锁定的影响。如果不这样做，当您键入任何这些标点字符时，大写锁定指示器将被隐藏。通过指定一个排除集而不是包含集，它应该与扩展字符更兼容。这是最丑陋、最特殊的一点，而且非西方语言有可能有足够不同的标点符号和/或标点代码，这是一个问题，但在我看来，至少对我来说是值得的。

小开

jQuery与twitter引导

检查以下字符的大写锁定:

大写A-Z或'Ä'， 'Ö'， 'Ü'， '!', '"', '§', '$', '%', '& amp ;', '/', '(', ')', '=', ':', ';', '*', '''

小写字母a-Z或0-9或'ä'， 'ö'， 'ü'， '。'，'， '，' +'， '#'

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var kc = e.which; // get keycode


var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','


// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed


// uppercase w/out shift or lowercase with shift == caps lock
if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
$(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
} else {
$(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
}
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

live demo on jsfiddle

小开

基于@joshuahedlund的回答，因为它对我来说很好。

我把代码变成了一个函数，这样就可以重用它，并在我的例子中把它链接到正文。如果您愿意，可以将其链接到密码字段。

<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) {
if(e){
e = e;
} else {
e = window.event;
}
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$(divId).style.display='block';
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$(divId).style.display='none';
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
}
</script>
<style>
.errorDiv {
display: none;
font-size: 12px;
color: red;
word-wrap: break-word;
text-overflow: clip;
max-width: 200px;
font-weight: normal;
}
</style>
</head>
<body  onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>

小开

你可以使用KeyboardEvent来检测许多键，包括最近浏览器上的大写锁。

getModifierState函数将提供以下状态:

Alt
AltGraph
大写锁定
控制
Fn (Android)
元
时键盘上的数字
操作系统(Windows &Linux)
ScrollLock
转变

这个演示适用于所有主流浏览器，包括移动浏览器(caniuse)。

passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});

小开

这是一个自定义的jquery插件，使用jquery ui，由这个页面上的所有好主意和工具提示小部件组成。大写锁定消息是自动应用于所有密码框，不需要更改您当前的html。

自定义插件代码…

(function ($) {
$.fn.capsLockAlert = function () {
return this.each(function () {
var capsLockOn = false;
var t = $(this);
var updateStatus = function () {
if (capsLockOn) {
t.tooltip('open');
} else {
t.tooltip('close');
}
}
t.tooltip({
items: "input",
position: { my: "left top", at: "left bottom+10" },
open: function (event, ui) {
ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
if (!capsLockOn) t.tooltip('close');
},
content: function () {
return $('<p style="white-space: nowrap;"/>')
.append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
.append('Caps Lock On');
}
})
.off("mouseover mouseout")
.keydown(function (e) {
if (e.keyCode !== 20) return;
capsLockOn = !capsLockOn;
updateStatus();
})
.keypress(function (e) {
var kc = e.which; //get keycode


var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
if (!isUp && !isLow) return; //This isn't a character effected by caps lock


// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed


// uppercase w/out shift or lowercase with shift == caps lock
if ((isUp && !isShift) || (isLow && isShift)) {
capsLockOn = true;
} else {
capsLockOn = false;
}
updateStatus();
});
});
};
})(jQuery);

适用于所有密码元素…

$(function () {
$(":password").capsLockAlert();
});

小开

有一个更简单的检测caps-lock的解决方案:

function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}

小开

Javascript代码

<script type="text/javascript">
function isCapLockOn(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('alert').style.visibility = 'visible';
else
document.getElementById('alert').style.visibility = 'hidden';
}
</script>

现在我们需要使用Html来关联这个脚本

<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>

小开

显示大写锁定状态的变量:

let isCapsLockOn = false;


document.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});


document.addEventListener( 'keyup', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});

适用于所有浏览器=> canIUse

小开

反应

onKeyPress(event) {
let self = this;
self.setState({
capsLock: isCapsLockOn(self, event)
});
}


onKeyUp(event) {
let self = this;
let key = event.key;
if( key === 'Shift') {
self.shift = false;
}
}

    <div>
<input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
{this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
let key = event.key;
let keyCode = event.keyCode;


component.lastKeyPressed = key;


if( key === 'Shift') {
component.shift = true;
}


if (key === 'CapsLock') {
let newCapsLockState = !component.state.capsLock;
component.caps = newCapsLockState;
return newCapsLockState;
} else {
if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
component.caps = true;
return true;
} else {
component.caps = false;
return false;
}
}
}

小开

上面的Mottie的和迭戈维埃拉的响应是我们最终使用的，现在应该是公认的答案。然而，在我注意到它之前，我写了这个不依赖字符代码的小javascript函数……

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
capsLockIsOnKeyDown: function(event) {
var eventWasShiftKeyDown = event.which === 16;
var capsLockIsOn = false;
var shifton = false;
if (event.shiftKey) {
shifton = event.shiftKey;
} else if (event.modifiers) {
shifton = !!(event.modifiers & 4);
}


if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
var lastChar = event.target.value[event.target.value.length-1];
var isAlpha = /^[a-zA-Z]/.test(lastChar);


if (isAlpha) {
if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
&& !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
capsLockIsOn =  true;
}
}
}
capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
return capsLockIsOn;
}
}

然后在事件处理程序中调用它，如capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

但最后我们还是用了@ motie和@Diego Vieira的回应

小开

@user110902发布的这个基于jquery的答案对我很有用。然而，我对它进行了一些改进，以防止@B_N的评论中提到的缺陷:当你按Shift时，它无法检测到CapsLock:

$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey )
||  ( s.toLowerCase() === s && s.toUpperCase() !== s && e.shiftKey )) {
alert('caps is on');
}
});

像这样，即使按下Shift，它也会工作。

小开

我知道有点晚了，但是，这对别人是有帮助的。

所以这里是我最简单的解决方案(土耳其字符);

function (s,e)
{
var key = e.htmlEvent.key;


var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
var digits = '0123456789';


if (upperCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[A]';
}


else if (lowerCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[a]';
}


else if (digits.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[1]';
}


else
{
document.getElementById('spanLetterCase').innerText = '';
}
}

小开

我们使用getModifierState来检查大写锁定，它只是鼠标或键盘事件的成员，所以我们不能使用onfocus。密码字段获得关注最常见的两种方式是单击或选项卡。我们使用onclick检查输入中的鼠标点击，并使用onkeyup检测前一个输入字段中的制表符。如果密码字段是页面上唯一的字段，并且是自动聚焦的，那么事件将在第一个密钥释放之前不会发生，这是可以的，但不理想，您确实希望在密码字段获得焦点后显示大写锁定工具提示，但在大多数情况下，这个解决方案非常有效。

超文本标记语言

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}

< a href = " https://codepen。io /不久/钢笔/ KxJwjq noreferrer“rel = > https://codepen.io/anon/pen/KxJwjq < / >

小开

所以我找到了这个页面，并不是很喜欢我找到的解决方案，所以我想出了一个，并把它提供给你们所有人。对我来说，只有当我输入字母时，大写锁才重要。这段代码为我解决了问题。它快速和简单，给你一个辣椒变量引用，只要你需要它。

let capsIsOn=false;
let capsChecked=false;


let capsCheck=(e)=>{
let letter=e.key;
if(letter.length===1 && letter.match(/[A-Za-z]/)){
if(letter!==letter.toLowerCase()){
capsIsOn=true;
console.log('caps is on');
}else{
console.log('caps is off');
}
capsChecked=true;
window.removeEventListener("keyup",capsCheck);
}else{
console.log("not a letter, not capsCheck was performed");
}


}


window.addEventListener("keyup",capsCheck);


window.addEventListener("keyup",(e)=>{
if(capsChecked && e.keyCode===20){
capsIsOn=!capsIsOn;
}
});

小开

使用getModifierState ()怎么样

getModifierState()方法如果指定的修饰符返回true
.
.
.
.

你可以这样使用它:

function checkIfCapsLockIsOn(event) {
var capsLockIsOn = event.getModifierState("CapsLock");
console.log("Caps Lock activated: " + capsLockIsOn);
}

这将简单地检查CapsLock是在还是从，并在控制台上显示它。你可以改变函数的工作方式。

然后在keydown或按键弹起上使用此函数。

<input type="text" onkeydown="checkIfCapsLockIsOn(event)">