你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌，我能找到的最好的解决方案是附加一个onkeypress事件到每个输入，然后检查每次按下的字母是否大写，如果是，然后检查shift是否也按下。如果不是，那么caps lock必须是打开的。这感觉真的很脏，而且…浪费——肯定有比这更好的办法吗?
当前回答
当您键入时，如果caplock是打开的，它可以自动将当前字符转换为小写字母。这样，即使打开了caplocks，它的行为也不会像在当前页面上那样。为了通知您的用户，您可以显示一个文本，说明caplocks已打开，但表单条目已转换。
其他回答
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上的现场演示
这里最上面的答案对我来说不适用，有几个原因(未注释的代码带有死链接和不完整的解决方案)。所以我花了几个小时尝试了所有的版本，得到了我能得到的最好的:这里是我的，包括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版本被关闭为重复，所以这就是为什么我在这里发布这两个问题。
反应
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;
}
}
}
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>
上面莫蒂和迭戈·维埃拉的回答是我们最终使用的，现在应该是公认的答案。然而，在我注意到它之前，我写了这个不依赖字符代码的小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的回应
