你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌，我能找到的最好的解决方案是附加一个onkeypress事件到每个输入，然后检查每次按下的字母是否大写，如果是，然后检查shift是否也按下。如果不是，那么caps lock必须是打开的。这感觉真的很脏，而且…浪费——肯定有比这更好的办法吗?
当前回答
我知道这是一个老话题，但我想我会反馈，以防它能帮助到其他人。这个问题的答案在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>
其他回答
上面莫蒂和迭戈·维埃拉的回答是我们最终使用的，现在应该是公认的答案。然而，在我注意到它之前，我写了这个不依赖字符代码的小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(事件)
但最后我们还是用了@ motie和@Diego Vieira的回应
你可以试试。增加了一个工作示例。当焦点在输入上时，打开caps lock使led变成红色或绿色。(还没有在mac/linux上测试)
注意:两个版本都适用于我。感谢您在评论中提出建设性意见。
旧版本:https://jsbin.com/mahenes/edit?js,output
另外，这是一个修改后的版本(有人能在mac上测试并确认吗)
新版本:https://jsbin.com/xiconuv/edit?js,output
新版本:
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插件，使用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;
}
}
jQuery与twitter引导
检查以下字符的大写锁定:
uppercase a - z前'Ä','Ö','Ü',' !', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';', '*', '''
小写字母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>");
jsfiddle上的现场演示
