你如何告诉如果大写锁定使用JavaScript?
但有一个警告:我做了谷歌，我能找到的最好的解决方案是附加一个onkeypress事件到每个输入，然后检查每次按下的字母是否大写，如果是，然后检查shift是否也按下。如果不是，那么caps lock必须是打开的。这感觉真的很脏，而且…浪费——肯定有比这更好的办法吗?
当前回答
我写了一个名为capsLock的库，它完全是你想要它做的。
只要把它包括在你的网页上:
<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。所以要小心。
其他回答
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>
反应
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;
}
}
}
我知道这是一个老话题，但我想我会反馈，以防它能帮助到其他人。这个问题的答案在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>
@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，它也会工作。
最近在hashcode.com上有一个类似的问题，我创建了一个jQuery插件来处理它。它还支持对数字的大写锁定识别。(在标准德语键盘布局上，大写锁定对数字有影响)。
你可以在这里查看最新版本:jquery.capsChecker
